Aurora UI

Stylegeneral

Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract. Best for Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections.

Vibrant gradients smooth blend Northern Lights effect mesh gradient luminous atmospheric abstract

#0080FF

#FF1493

#00FFFF

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Aurora UI

Keywords: Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract
Primary colours: Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF
Secondary colours: Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)
Effects & animation: Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
Best for: Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections
Do not use for: Data-heavy dashboards, critical accessibility, content-heavy where distraction issues

## Prompt keywords
Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.

## CSS / technical
background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply

## Implementation checklist
☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified

## Design system variables
--gradient-colors: complementary pairs, --animation-duration: 8-12s, --blend-mode: screen, --color-saturation: 1.2, --effect: iridescent, --loop-smooth: true

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source