Teal gradient
Teal mixes the calm of blue with the freshness of green. It is popular in health, travel and productivity products because it feels clean without being cold. Below are 12 teal gradients — copy the CSS, download a PNG, or open one in the editor.
- Aa · 3.4:1
White text: Fails AA — large text only (3:1)
- Aa · 3.0:1
Black text: Fails AA — large text only (3:1)
- Aa · 4.9:1
Black text: Passes AA
- Aa · 5.4:1
Black text: Passes AA
- Aa · 12.5:1
Black text: Passes AA
- Aa · 8.9:1
White text: Passes AA
- Aa · 5.3:1
Black text: Passes AA
- Aa · 1.7:1
Black text: Fails AA — no plain text
- Aa · 1.8:1
White text: Fails AA — no plain text
- Aa · 3.2:1
Black text: Fails AA — large text only (3:1)
- Aa · 4.0:1
Black text: Fails AA — large text only (3:1)
- Aa · 4.7:1
White text: Passes AA
Using teal gradients well
Good for: health and wellness apps, travel and ocean themes, productivity tools, data visualisation.
Pairing: Teal → blue and teal → green stay smooth; teal with coral or orange is a balanced complementary pair.
Readable text: Dark teals carry white text; mint and aqua tints need dark text. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a teal gradient?
A simple teal gradient is background: linear-gradient(in oklch 135deg, #009a9a 0%, #005959 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with teal in a gradient?
Teal → blue and teal → green stay smooth; teal with coral or orange is a balanced complementary pair.
What text colour is readable on a teal gradient?
Dark teals carry white text; mint and aqua tints need dark text. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a teal gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are teal gradients typically used?
Common uses: health and wellness apps, travel and ocean themes, productivity tools, data visualisation.