NodlumeNeutral · Linear
Slate gradient
Slate is a ramp between two cool grays — a dark slate and a slightly lighter one — with enough blue in both that the surface reads as stone rather than as the gray of a disabled button. It is the neutral gradient for dark interfaces: a sidebar, a code panel, a settings sheet, anything that should feel like a material without introducing a hue.
Its restraint is the feature. A neutral gradient gives a dark UI the depth a solid lacks while staying invisible under the content, and it lets the one colored element on the page own the color. Text of any lightness holds on it. If you need warmth, swap both stops for warm grays and you have Stone; if you need a hue, you want Deep ocean.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #0f172a0%
- #334155100%
CSS
.slate {
background-image: linear-gradient(160deg in oklab, #0f172a 0%, #334155 100%);
}Tailwind
bg-[image:linear-gradient(160deg_in_oklab,_#0f172a_0%,_#334155_100%)]
Token
--gradient-slate: linear-gradient(160deg in oklab, #0f172a 0%, #334155 100%);
Slate, answered
- What are the CSS colors in the Slate gradient?
- Slate uses 2 colors: #0f172a, #334155. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(160deg in oklab, #0f172a 0%, #334155 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 Slate 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 Slate 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.