Conic Aura
also known asaurora gradient · conic glow · ambient halo · AI shimmer
A circular, multi-stop conic gradient used as an ambient glow behind hero elements, often blurred and slowly rotating.
A conic aura is a `conic-gradient()` with 4–7 color stops arranged around a center point, then heavily blurred (`filter: blur(40–80px)`) so individual colors smear into a soft, multi-hued halo. Placed behind a hero card, logo, or headline, it produces a quiet, atmospheric glow that hints at color without committing to any one tone.
Unlike linear or radial gradients, the conic version naturally produces multiple color transitions in a single declaration, which is why it became the default "AI shimmer" of 2024–2026. A slow rotation (10–30s linear) gives the aura ambient life without distracting motion.
Done well, conic auras feel atmospheric and modern. Done badly — too saturated, too fast, only two colors — they read as cheap. The craft is in restrained chroma and slow speed.
- Hero backgrounds for AI, design, or creative tools
- Behind featured cards or pricing tables
- Empty states that need atmosphere without a real image
- Dense layouts where the aura competes with content
- Brands that need a strict, controlled palette (use a single-tone glow instead)
- +Use 5–7 color stops in a tonal family, not random rainbow
- +Apply heavy blur (40px+) so colors blend, not stripe
- +Rotate slowly (15s+) — fast rotation looks like loading spinners
- −Don't use only two colors — that's a 2-stop gradient, not an aura
- −Don't use saturated primaries — keep chroma controlled (oklch C ≤ 0.18)
- −Don't combine with another animated background effect
People also ask
What's the difference between a mesh gradient and a conic aura?
Mesh gradients blend multiple radial points across a 2D surface — they fill the whole background. Conic auras are circular halos placed behind a focal element, usually blurred so the rotation reads as breathing light rather than discrete colors.