Aurora CSS Gradient Generator
An aurora CSS gradient inspired by the northern lights, flowing from teal-green through cyan into violet. Dreamy and modern, it makes a striking hero background on dark UIs. Copy it or tweak the stops below. 100% in your browser - copy the CSS or a Tailwind v4 export.
About the aurora gradient
Aurora gradients recreate the northern lights by sweeping between green, cyan and violet, the exact hues of a real aurora. This preset runs teal-green into cyan into violet so it glows against a dark background. It leans on OKLCH interpolation to keep the green-to-purple crossover clean rather than grey. Set it as a radial or conic gradient for a more atmospheric glow, then copy the CSS or Tailwind v4 @theme token.
The CSS for this gradient:
background: linear-gradient(in oklch 135deg, #34d399 0%, #22d3ee 45%, #818cf8 75%, #a855f7 100%);
Frequently Asked Questions
An aurora (northern lights) gradient blends teal-green (#34d399), cyan (#22d3ee) and violet (#a855f7), the colors of a real aurora borealis. The green-to-purple sweep over a dark background is what gives the effect.
Place it over a dark background and interpolate in OKLCH so the green-cyan-violet transition stays vivid. Switching the type to radial or conic in the generator spreads the colors like light in the sky for a more atmospheric glow.