NodlumePurple & pink · Linear
Purple gradient
Purple runs a deep violet into a bright orchid, staying inside one hue so the ramp reads as one color with depth rather than as two colors meeting. It is a monochromatic gradient, and monochromatic gradients are the safest kind: nothing in them can clash, and the light end works as a highlight for the dark end automatically.
It carries white text on its dark half and holds up at button size, which two-hue gradients rarely do. It is a natural fit for anything creative or premium — design tools, music, luxury — and reads as childish only when the orchid is pushed toward magenta. Keep the second stop where it is, or darker, if the product is serious.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #4c1d950%
- #c084fc100%
CSS
.purple {
background-image: linear-gradient(135deg in oklab, #4c1d95 0%, #c084fc 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#4c1d95_0%,_#c084fc_100%)]
Token
--gradient-purple: linear-gradient(135deg in oklab, #4c1d95 0%, #c084fc 100%);
Purple, answered
- What are the CSS colors in the Purple gradient?
- Purple uses 2 colors: #4c1d95, #c084fc. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #4c1d95 0%, #c084fc 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 Purple 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 Purple 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.