NodlumeGreen & teal · Linear
Teal gradient
Teal runs a dark teal into a clear turquoise. It sits between blue and green and borrows from both — blue's reliability, green's calm — which is why it has become the second-most common brand hue after blue in health, fintech and developer tools. As a ramp it has more energy than Ocean and less than Mint's larger cousin, Emerald.
White text holds on the dark two-thirds, and the turquoise end makes a good highlight for buttons and links elsewhere on the page. Its one hazard is that turquoise on screen drifts toward cyan on cheap displays, where it can look like a link color; keep the light stop slightly green of pure cyan, as here, and the ramp stays teal.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #134e4a0%
- #2dd4bf100%
CSS
.teal {
background-image: linear-gradient(135deg in oklab, #134e4a 0%, #2dd4bf 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#134e4a_0%,_#2dd4bf_100%)]
Token
--gradient-teal: linear-gradient(135deg in oklab, #134e4a 0%, #2dd4bf 100%);
Teal, answered
- What are the CSS colors in the Teal gradient?
- Teal uses 2 colors: #134e4a, #2dd4bf. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #134e4a 0%, #2dd4bf 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 Teal 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 Teal 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.