# Gradient mesh / aurora

Also called: mesh gradient, aurora background, gradient blobs, northern lights UI, Stripe gradient  
Era: 2020 onward (Stripe 2020 hero, macOS Big Sur wallpapers, Linear 2021)  
Page: https://designforai.dev/style/gradient-mesh-aurora

## Traits

- backgrounds made of several overlapping radial gradients that blend like an aurora
- 3-5 hues, usually cool-to-warm (violet, blue, teal, pink, peach)
- slow animation of the blobs: 15-30s loops, subtle scale and drift
- content sits on a solid or lightly frosted panel in front
- type is neutral and modern so the background carries the mood
- noise or grain overlay to avoid banding on the gradients
- often only in the hero; the rest of the page is plain

Palette: #0f0c29 dark base (or #ffffff light), #7f5af0 violet, #2cb1bc teal, #ff8fab pink, #ffd166 peach, #fffffe text on dark

Type: Manrope, DM Sans, Plus Jakarta Sans or Satoshi-alike "General Sans" (free via Fontshare); headings 600-700 at 48-72px with -0.02em, body 400 at 17px

## Do

- build the mesh with 4-5 absolutely positioned radial-gradient blobs, each 40-60vw, blur(60-100px), mix-blend-mode screen on dark or multiply on light
- add an SVG noise overlay at 5-8% opacity to kill banding
- keep the mesh in the hero and one footer band; the middle of the page is calm

## Don't

- do not animate blobs faster than 15s or scale them beyond 1.2x; it becomes nauseating
- do not put small text directly on the mesh without a panel or scrim
- do not use rainbow hue spreads; pick a family of 3-5 related hues

Known for it: Stripe, Linear (2021 hero), Apple macOS Big Sur wallpapers, Framer marketing

## CSS seed

```css
:root{--bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif}
```

## Prompt

Build the site with an aurora gradient mesh hero. Base #0f0c29. Behind the hero, place five absolutely positioned circles (50vw each, border-radius 50%, filter blur(90px), mix-blend-mode screen) in #7f5af0, #2cb1bc, #ff8fab, #ffd166 and #4f46e5, overlapping at different offsets, each drifting on its own 20-28s ease-in-out infinite loop (translate up to 10%, scale 0.9 to 1.15). Overlay an SVG feTurbulence noise layer at opacity 0.06 across the hero. Text #fffffe, secondary rgba(255,255,254,0.7). Font Manrope: h1 700 at 68px with -0.025em, subhead 400 at 20px, body 17px. Hero content sits on nothing but has a soft dark scrim (radial-gradient rgba(15,12,41,0.6)) behind the text for legibility. Primary button white with #0f0c29 text, radius 12px; secondary is a 1px rgba(255,255,255,0.3) outline. Below the hero the page is flat #0f0c29 with 1px rgba(255,255,255,0.08) rules and cards radius 16px. Under prefers-reduced-motion, freeze the blobs.