NodlumeWarm · Linear
Ember gradient
Ember runs from a near-black at the bottom to a red-orange at the top, with the transition held low so most of the surface stays dark and the color arrives as heat rather than paint. It is the warm answer to a dark-mode hero: the page stays dark, but the top edge carries a glow the eye reads as a light source below the fold.
White text sits comfortably on the dark two-thirds; keep headlines out of the top band or drop the orange's alpha until they hold. It pairs with amber or gold accents and fights blue ones. For a full-page background, set the angle to 180° so the glow rises from the bottom edge instead, which reads as a floor rather than a sky.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #0c0a090%
- #7c2d1255%
- #f97316100%
CSS
.ember {
background-image: linear-gradient(0deg in oklab, #0c0a09 0%, #7c2d12 55%, #f97316 100%);
}Tailwind
bg-[image:linear-gradient(0deg_in_oklab,_#0c0a09_0%,_#7c2d12_55%,_#f97316_100%)]
Token
--gradient-ember: linear-gradient(0deg in oklab, #0c0a09 0%, #7c2d12 55%, #f97316 100%);
Ember, answered
- What are the CSS colors in the Ember gradient?
- Ember uses 3 colors: #0c0a09, #7c2d12, #f97316. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(0deg in oklab, #0c0a09 0%, #7c2d12 55%, #f97316 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 Ember 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 Ember 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.