NodlumeGreen & teal · Linear
Mint gradient
Mint is a pale green running into a soft teal, both stops light, both low in chroma, so the gradient reads as fresh air rather than as green paint. It is the calm end of the green family — the one for surfaces rather than accents — and it is unusual among pastels in that it works in a professional product as well as a consumer one.
Dark text holds across it and it makes an excellent background for a success or confirmation state, where a solid green would shout. It also suits finance and health, the two industries where green means something. Keep it away from red or orange accents, which turn the whole page into a traffic light.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #d1fae50%
- #5eead4100%
CSS
.mint {
background-image: linear-gradient(135deg in oklab, #d1fae5 0%, #5eead4 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#d1fae5_0%,_#5eead4_100%)]
Token
--gradient-mint: linear-gradient(135deg in oklab, #d1fae5 0%, #5eead4 100%);
Mint, answered
- What are the CSS colors in the Mint gradient?
- Mint uses 2 colors: #d1fae5, #5eead4. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #d1fae5 0%, #5eead4 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 Mint 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 Mint 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.