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.

Type

Angle (135°)

Interpolation color space

Color stops

45%

75%

100%

CSS

background: linear-gradient(in oklch 135deg, #34d399 0%, #22d3ee 45%, #818cf8 75%, #a855f7 100%);

Tailwind v4 (@theme)

Use it as bg-(image:--gradient-brand)

@theme {
  --gradient-brand: linear-gradient(in oklch 135deg, #34d399 0%, #22d3ee 45%, #818cf8 75%, #a855f7 100%);
}

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.