Aurora Background
Gradient mesh backgrounds that simulate the aurora borealis — multiple overlapping radial gradients in saturated colors, smoothly blended, often animated. Popular in AI and developer product landing pages.
Plain English
Aurora backgrounds emerged as the defining visual motif of the 2023–2025 wave of AI product launches. The effect evokes the northern lights: pools of vivid color — electric indigo, emerald, hot coral — bleeding into each other on a deep dark canvas. The technique stacks three to six large radial gradients at different positions on a dark background, letting the colors blend in the overlap zones. What makes it feel alive rather than flat is motion: the gradient blobs drift slowly across the background on a 10–20 second loop, and a noise/grain overlay prevents the gradient from looking plasticky. The palette skews heavily saturated (HSL saturation 70–100%) and the blobs are intentionally soft (spread radius 300–600px), so no hard edges compete with the foreground content. Vercel, Linear, Anthropic, and Clerk all use aurora-style backgrounds on their hero sections; the style communicates intelligence, energy, and technical depth.
Technical
CSS implementation — dark base: background: #050510. Layer radial gradients: background: radial-gradient(ellipse 600px 400px at 20% 30%, hsla(270, 90%, 60%, 0.5), transparent), radial-gradient(ellipse 500px 600px at 80% 20%, hsla(200, 100%, 55%, 0.4), transparent), radial-gradient(ellipse 700px 400px at 50% 80%, hsla(330, 85%, 55%, 0.35), transparent). Animation: @keyframes aurora-drift with transform: translate() + scale() on each blob, 12–20s infinite alternate ease-in-out. Grain overlay (see grain-texture): SVG feTurbulence noise at 5–10% opacity. Tailwind arbitrary: bg-[radial-gradient(...)]. Performance: use will-change: transform on animated blobs; run animation on a separate div from the content layer. Dark-mode only: aurora on light backgrounds washes out foreground content — always pair with dark text surfaces.
Live Demo
Aurora / Mesh Gradient Background
Multiple overlapping radial gradients animated in slow circular paths create the aurora effect.
Your headline here
Design that
moves people.
Aurora backgrounds use slow-moving blurred orbs to suggest depth and life without distraction.
Usage
✓ Good usage
A dark hero section with three animated aurora blobs (indigo, cyan, coral) drifting slowly behind a centered headline and CTA — the motion suggests life and energy without competing with the white text above it.
✗ Bad usage
An aurora background on a light-mode page with dark text — the vivid gradients bleed into the text color range, destroying contrast and making the copy unreadable against the colored pools of light.
Recommended values
- Background base: #030308 to #0a0a1a (near-black, blue-tinted)
- Blob saturation: HSL saturation 75–100%
- Blob spread: ellipse 400–700px, soft radial gradient
- Blob opacity: 0.3–0.6 per layer (sum: 1.0–1.8 total)
- Animation duration: 12–20s infinite alternate ease-in-out
- Grain overlay: 5–10% opacity for texture
Common mistakes
- Too many blobs at full opacity — six radial gradients at 0.6 opacity each create a muddy, oversaturated mess where no single color reads clearly; cap total visible opacity sum at roughly 1.5.
- No grain overlay — without noise texture, smooth gradients look synthetic and screen-screensaver-like; even 6–8% grain makes them feel organic.
- Animating the blobs with CSS left/top (or background-position changes) instead of transform — left/top trigger layout recalculation on every frame; use transform: translate() + a separate absolutely-positioned element per blob.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Create an aurora background for the hero section on a dark (#050510) base. Build three absolutely-positioned blob divs, each 600px × 600px, with radial-gradient fills: blob-1 (indigo, hsl(265,90%,60%)), blob-2 (cyan, hsl(195,100%,55%)), blob-3 (rose, hsl(330,85%,55%)). Set each to 45% opacity and blur(80px). Animate each blob independently with a keyframe that translates X and Y by ±80px and scales ±0.15 over 14s, 16s, and 18s respectively, all infinite alternate ease-in-out. Add a grain-texture SVG overlay at 7% opacity on top. Ensure text on the hero reads at 4.5:1 contrast minimum against all aurora states.