NodlumePurple & pink · Linear
Candy gradient
Candy is a hot pink running into a saturated violet, and it is loud by design: both stops are near full chroma, and the ramp between them stays there. It is the gradient of consumer apps, festival posters and anything aimed at people under twenty-five, and it works because it refuses to be subtle — there is no version of Candy that reads as a wash.
Give it one job on a page: the primary call to action, a single hero panel, or a headline clipped to text. Two Candy surfaces in one viewport cancel each other out. White text holds on the violet end and struggles on the pink, so put headlines at the dark side of the ramp. Pair it with black or near-black chrome, never with more color.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #ec48990%
- #7c3aed100%
CSS
.candy {
background-image: linear-gradient(45deg in oklab, #ec4899 0%, #7c3aed 100%);
}Tailwind
bg-[image:linear-gradient(45deg_in_oklab,_#ec4899_0%,_#7c3aed_100%)]
Token
--gradient-candy: linear-gradient(45deg in oklab, #ec4899 0%, #7c3aed 100%);
Candy, answered
- What are the CSS colors in the Candy gradient?
- Candy uses 2 colors: #ec4899, #7c3aed. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(45deg in oklab, #ec4899 0%, #7c3aed 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 Candy 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 Candy 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.