What Is a CSS Text Gradient?
CSS text gradients apply color transitions directly to text characters — no image editing needed. The technique uses background-clip: text to mask a gradient background to the shape of the text, creating eye-catching headings and display type that would otherwise require Photoshop or Illustrator.
The CSS Technique
Three properties work together: background: linear-gradient(...) defines the gradient colors and direction. -webkit-background-clip: text clips the gradient to the text shape. -webkit-text-fill-color: transparent makes the original text color invisible so the gradient shows through. This tool generates all three properties with your chosen colors, angle, and font settings.
How to Use This CSS Text Gradient
- Type your text — Enter the heading or text you want to apply a gradient to.
- Choose gradient colors — Pick two or more colors for your text gradient. Bold color combinations work best on headings.
- Set the gradient direction — Adjust the angle — common directions include horizontal (90°), vertical (180°), and diagonal (135°).
- Preview and copy — See the gradient text rendered live, then copy the CSS code needed to achieve the effect.
What the copied CSS does across browsers, tested
The CSS this tool copies sets a gradient background, clips it to the letters with background-clip: text (and the -webkit- spelling), and makes the text fill transparent so the gradient shows through. MDN's compatibility data lists the unprefixed property from Chrome and Edge 120, Safari 14 and Firefox 49, and the prefixed one in Chromium and Safari for over a decade, so every current browser draws it. We checked the copied CSS in Chromium 141 and Firefox 142 on October 12, 2026:
| Situation | Chromium | Firefox |
|---|---|---|
| Normal display | Gradient text | Gradient text |
| Forced colours (Windows High Contrast), emulated | Readable in the system text colour | Readable in the system text colour |
| Text selected | Readable (selection colours replace the gradient) | Readable |
| Browser without background-clip: text (simulated) | The whole box fills with the gradient and the text disappears | Same |
Two things follow. A plain color declared before the gradient is not a fallback: -webkit-text-fill-color: transparent wins over it in every browser that knows the property, so the only browsers that would need a fallback are ones that also lack background-clip: text, and today that is none in normal use. And adding a ::selection rule to "fix" selected gradient text, a common snippet, made the selected letters invisible in our Chromium test, because it gives the selection a background while the fill stays transparent; the default selection behaviour is already readable, so leave it alone.
Contrast is the remaining risk. Text contrast is set by the gradient's lightest and darkest stops against the page behind, not by an average, so check both ends with the Contrast Checker; at large heading sizes WCAG asks for 3:1. The default teal-and-amber stops work on a dark page but fall below 3:1 on white.
Frequently Asked Questions
📖 Learn More
Related Article How to Create CSS Text Gradients →Built by Derek Giordano · Part of Ultimate Design Tools