What Is Aurora UI?
Aurora UI is a design trend characterized by large, flowing gradient meshes and ambient color fields that create atmospheric, dreamy backgrounds. Named after the aurora borealis (northern lights), the style uses multi-point gradient blends that shift and flow between colors, creating a sense of depth and movement without being distracting.
Unlike sharp geometric patterns or flat color blocks, Aurora UI creates soft, environmental backdrops that make content float in a colorful atmosphere.
Key Principles
1. Mesh Gradients
Multi-point gradients that blend three or more colors in organic, non-linear ways. Unlike linear or radial gradients, mesh gradients create complex, natural-feeling color transitions.
2. Ambient, Environmental Color
Color isn't confined to elements — it fills the environment. Backgrounds glow, shift, and create mood. The color is atmospheric rather than structural.
3. Soft, Blurred Color Fields
Large, blurred color shapes overlapping and blending. Gaussian blur transforms sharp shapes into soft clouds of color.
4. Contrast with Clean Content
Aurora backgrounds work best when paired with clean, high-contrast foreground content. The atmosphere is the backdrop, not the star.
History & Origins
Gradient meshes have existed in design tools since Adobe Illustrator's mesh tool, but the Aurora trend in UI emerged around 2020-2021, popularized by Apple's macOS Monterey wallpapers, Stripe's website redesigns, and the broader glassmorphism movement. The style also connects to the vaporwave aesthetic and synthwave color palettes of the mid-2010s.
Modern UI Applications & Examples
- Stripe — Stripe's website is perhaps the most iconic use of gradient mesh backgrounds in web design, with flowing color transitions that shift as you scroll.
- Apple (macOS wallpapers) — macOS Monterey and Sonoma's default wallpapers are Aurora-style gradient meshes that set the tone for the OS.
- Linear — Uses subtle gradient meshes in backgrounds and marketing materials.
- Vercel — Gradient mesh backgrounds create depth behind clean content areas.
When to Use It
Aurora UI works for hero sections, landing pages, app backgrounds, loading screens, and any interface where you want to create atmosphere and visual sophistication. It pairs perfectly with glassmorphism.
When Not To
Full-page Aurora backgrounds can slow performance on older devices (large blurred elements are GPU-intensive). Avoid for data-heavy interfaces where the background competes with content. Also be careful with text readability over shifting color fields.
How to Apply It
- Use multiple positioned, blurred pseudo-elements for mesh effects
- Choose 3-4 harmonious colors that blend smoothly
- Apply heavy blur (80-150px) for soft, ambient gradients
- Keep foreground content high-contrast and clean
- Consider CSS animations for subtle color movement
/* Aurora gradient mesh background */
.aurora {
position: relative;
min-height: 100vh;
background: #0f0f1a;
overflow: hidden;
}
.aurora::before,
.aurora::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.6;
}
.aurora::before {
width: 600px;
height: 600px;
background: #7928CA;
top: -10%;
right: -5%;
}
.aurora::after {
width: 500px;
height: 500px;
background: #FF0080;
bottom: -10%;
left: 10%;
}
/* Third color blob via extra element */
.aurora .blob {
position: absolute;
width: 450px;
height: 450px;
background: #0070F3;
border-radius: 50%;
filter: blur(120px);
opacity: 0.5;
top: 40%;
left: 50%;
}
Related Styles
See also: Glassmorphism, Cyberpunk UI, Organic/Biomorphic Design