NodlumeWarm · Linear
Sunset gradient
Sunset is the gradient everyone reaches for first, and for a reason: it runs a warm orange through hot pink into a deep indigo, the same sequence a real sky follows as light leaves it, so the eye reads it as natural rather than synthetic. The version here is interpolated in oklab, which keeps the pink stage saturated instead of muddying it into brown — the fault most sunset gradients on the web share.
It belongs on a hero, a landing-page header, or a full-bleed section break where it can breathe; at card size the three stops crowd. Pair it with white text and keep body copy off it entirely — the pink band is where contrast dies. If you need it quieter, drop the orange to 60% alpha and let the surface show through as a wash.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #f973160%
- #ec489955%
- #6366f1100%
CSS
.sunset {
background-image: linear-gradient(20deg in oklab, #f97316 0%, #ec4899 55%, #6366f1 100%);
}Tailwind
bg-[image:linear-gradient(20deg_in_oklab,_#f97316_0%,_#ec4899_55%,_#6366f1_100%)]
Token
--gradient-sunset: linear-gradient(20deg in oklab, #f97316 0%, #ec4899 55%, #6366f1 100%);
Sunset, answered
- What are the CSS colors in the Sunset gradient?
- Sunset uses 3 colors: #f97316, #ec4899, #6366f1. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(20deg in oklab, #f97316 0%, #ec4899 55%, #6366f1 100%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Sunset gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Sunset gradient interpolated in oklab?
- Two colors interpolated in sRGB pass through a grayer, darker middle than either end; in oklab the midpoint is perceptually between them, so the ramp stays clean. Every gradient function accepts an in <space> keyword, and oklab is the right default for a color-to-color ramp.