NodlumeGreen & teal · Linear
Emerald gradient
Emerald runs from a deep forest green to a bright emerald, a monochromatic ramp like Purple, with the same benefit: it cannot clash, and its light end highlights its dark end for free. Green gradients are rarer on the web than blue and purple ones, which makes Emerald distinctive by default in a way Indigo no longer is.
White text holds across most of it, weakening only in the last few percent of the bright stop. It is the natural gradient for anything sustainable, financial, or outdoors, and it pairs with gold and cream accents. Avoid combining it with a red primary, and do not use it as a success indicator on the same page — a green hero makes the green checkmark invisible.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #064e3b0%
- #34d399100%
CSS
.emerald {
background-image: linear-gradient(135deg in oklab, #064e3b 0%, #34d399 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#064e3b_0%,_#34d399_100%)]
Token
--gradient-emerald: linear-gradient(135deg in oklab, #064e3b 0%, #34d399 100%);
Emerald, answered
- What are the CSS colors in the Emerald gradient?
- Emerald uses 2 colors: #064e3b, #34d399. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #064e3b 0%, #34d399 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 Emerald 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 Emerald 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.