Aurora Background

Live preview — fully interactive

The prompt

Build an ambient aurora gradient background for a dark hero section, animated with pure CSS.

## Structure
- A full-viewport scene container (min-height 100vh, overflow hidden, background #08080d, flex-centered content)
- Three absolutely positioned blob divs, each 55vmax x 55vma

Full prompt (2213 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; color: #f2f2f7; font-family: 'Inter', system-ui, sans-serif; }
  .scene { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; ju

Complete self-contained HTML unlocks after purchase

About this effect

Three oversized radial-gradient blobs in violet, cyan, and magenta drift and morph behind your hero content, animated with pure CSS keyframes — translate, scale, and border-radius interpolation over 26-34s loops. A fine SVG feTurbulence noise overlay adds film grain so the gradients never look flat. Zero JavaScript, GPU-friendly, and instantly usable behind any headline.