Aurora UI
Also called: Aurora gradient, Aurora background
Slow, blurred ribbons of green, teal and violet light drift behind a calm night-sky UI — the background is the brand.
Design keywords
Say these words to ask for this style.
Aurora UI paints the page background with soft, heavily blurred colour ribbons that look like the northern lights: long diagonal bands of mint green, cyan, violet and a touch of pink fading into a deep navy sky. Everything on top stays quiet and clean — near-opaque dark panels, thin borders, light geometric type — so the colour feels like ambient light, not decoration. The ribbons spill into the UI only as gradient headline text, soft glows on primary actions and glowing chart lines.
Best for
- AI product and model launch pages
- Developer tools and API landing pages
- Waitlists and hero-led marketing sites
- Music, meditation and ambient apps
Avoid for
- Dense data tools where the background distracts
- Brands that need warm, earthy or traditional feeling
- Print-like editorial reading pages
✓ Do
- Keep ribbons behind content at 40–70% opacity with 46–56px blur (28–34px on mobile)
- Use 3–4 hues that sit next to each other (green → cyan → violet)
- Keep panels 70–85% opaque so text never sits directly on the light
- Animate ribbons over 32–40s with transform only
✕ Don't
- Don’t use round “blob” spots — aurora light is long, diagonal and streaky
- Don’t frost every card with heavy blur (that is glassmorphism)
- Don’t add hard borders, grids or noise on top of the sky
- Don’t animate faster than ~30s per loop
Not to be confused with
On mobile
Freeze the ribbons into a static gradient on phones (no animation, 1–2 blurred layers) and keep the aurora concentrated at the top of the screen behind the app bar; lists and tab bar sit on solid navy.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.