Design for AIGradient mesh / aurora: UI design prompt
Palette, type rules and a pasteable prompt for gradient mesh / aurora. Also called mesh gradient, aurora background, gradient blobs, northern lights UI, Stripe gradient. 2020 onward (Stripe 2020 hero, macOS Big Sur wallpapers, Linear 2021).
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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.
## Tokens
:root { --bg:#0f0c29; --fg:#fffffe; --accent:#7f5af0; --accent2:#2cb1bc; --accent3:#ff8fab; --radius:16px; --grain:0.06; --font:'Manrope',sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.