NodlumeWarm · Linear
Sunrise gradient
Sunrise is Sunset's quieter sibling: it starts in a pale gold, warms through peach, and settles into a soft rose, all in the lighter half of the range. Nothing in it is saturated enough to fight text, which is why it works as a background where Sunset can only be a backdrop — it reads as morning light on a wall rather than a sky.
Use it for onboarding screens, empty states, and the header of a page that should feel welcoming rather than dramatic. Dark text holds contrast across the whole ramp. It is also one of the few warm gradients that survives dark mode with a simple alpha drop, because none of its stops has a dark counterpart to invert.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #fde68a0%
- #fdba7450%
- #fda4af100%
CSS
.sunrise {
background-image: linear-gradient(160deg in oklab, #fde68a 0%, #fdba74 50%, #fda4af 100%);
}Tailwind
bg-[image:linear-gradient(160deg_in_oklab,_#fde68a_0%,_#fdba74_50%,_#fda4af_100%)]
Token
--gradient-sunrise: linear-gradient(160deg in oklab, #fde68a 0%, #fdba74 50%, #fda4af 100%);
Sunrise, answered
- What are the CSS colors in the Sunrise gradient?
- Sunrise uses 3 colors: #fde68a, #fdba74, #fda4af. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(160deg in oklab, #fde68a 0%, #fdba74 50%, #fda4af 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 Sunrise 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 Sunrise 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.