UI Lingo
Shortlist 0

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.

“Northern lights”Futuristic & TechEra: 2021 → todayDreamyCalmTechy
Open full screen ↗
aurora-ui / landingEN
aurora-ui / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Dark

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    Design keywords

    Say these words to ask for this style.

    northern lights backgroundblurred colour ribbonsmint to violet gradientnight-sky navygradient headline textsoft glow buttonsslow drifting lightcalm panels on top

    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

    Glassmorphism →Glassmorphism is about frosted see-through panels over round blobs; Aurora is about long streaky light ribbons with calm, mostly opaque panels on top.Gradient Mesh / Aurora Evolved →Gradient Mesh puts grainy multi-point gradients inside cards and letters on a light page; Aurora keeps a smooth blurred sky only in the background.Frutiger Aero →Frutiger Aero is glossy, sky-blue and bubbly with skeuomorphic shine; Aurora is a dark, matte night sky with soft blurred light.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close