NodlumePurple & pink · Linear
Lavender gradient
Lavender is a pale lilac fading into a blush pink — two pastel stops that stay in the top quarter of the lightness range, so the gradient behaves as a tinted surface rather than a colored one. It is the purple family's answer to Peach, and it does the same job: a page-sized background that has a temperature without having a color.
Dark text holds at every point, which makes it usable behind body copy, a place most gradients cannot go. It suits wellness, beauty, and anything soft; it does not suit a developer tool. In dark mode it has no equivalent — pastels do not invert — so give the dark theme a Deep ocean or a plain surface instead and let Lavender be a light-mode-only gradient.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #e9d5ff0%
- #fbcfe8100%
CSS
.lavender {
background-image: linear-gradient(150deg in oklab, #e9d5ff 0%, #fbcfe8 100%);
}Tailwind
bg-[image:linear-gradient(150deg_in_oklab,_#e9d5ff_0%,_#fbcfe8_100%)]
Token
--gradient-lavender: linear-gradient(150deg in oklab, #e9d5ff 0%, #fbcfe8 100%);
Lavender, answered
- What are the CSS colors in the Lavender gradient?
- Lavender uses 2 colors: #e9d5ff, #fbcfe8. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(150deg in oklab, #e9d5ff 0%, #fbcfe8 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 Lavender 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 Lavender 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.