Sunset CSS Gradient Generator

A warm sunset CSS gradient that sweeps from golden orange through pink into deep purple, just like the sky at dusk. Copy it in one click or adjust the stops below to match your brand. 100% in your browser - copy the CSS or a Tailwind v4 export.

Type

Angle (45°)

Interpolation color space

Color stops

50%

100%

CSS

background: linear-gradient(in oklch 45deg, #f59e0b 0%, #f43f5e 50%, #8b5cf6 100%);

Tailwind v4 (@theme)

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

@theme {
  --gradient-brand: linear-gradient(in oklch 45deg, #f59e0b 0%, #f43f5e 50%, #8b5cf6 100%);
}

About the sunset gradient

Sunset gradients are a design classic because the warm-to-cool sweep from orange into purple mimics the real sky and instantly feels inviting. This preset moves through amber, rose and violet so you get that full dusk range rather than a single flat tint. Interpolating in OKLCH keeps the orange-to-pink handoff vivid instead of turning grey in the middle. Tweak the angle for a diagonal glow, then copy the CSS or Tailwind v4 export.

The CSS for this gradient:

background: linear-gradient(in oklch 45deg, #f59e0b 0%, #f43f5e 50%, #8b5cf6 100%);

Frequently Asked Questions

A sunset gradient runs warm to cool: a golden orange or amber (#f59e0b), through a pink or rose (#f43f5e), into a purple or violet (#8b5cf6). That orange-pink-purple sweep is what reads as a dusk sky.

Set the interpolation color space to OKLCH. Blending warm and cool hues in sRGB dips through a greyish mid-tone, while OKLCH keeps the transition bright and even the whole way across.