How Gradient Text Actually Works in CSS
There is no CSS property for gradient text. What looks like one is a small trick: put a gradient behind the element, clip that background to the shape of the letters, and make the letters themselves transparent so the gradient shows through. The CSS Gradient Text Generator writes it for you.
The three parts
First, a linear gradient as the background of the element - exactly the kind the Gradient Generator produces.
Second, background-clip set to text, which trims the background so it only shows where the glyphs are rather than filling the whole box.
Third, the text colour set to transparent, because the letters would otherwise sit opaquely on top of the background you just clipped.
Remove any one and the effect collapses: without the clip you get a coloured block, without the transparency you get ordinary text with a gradient hidden behind it.
The part people forget
The text is transparent. If the clip does not apply - an older browser, a rendering mode that ignores it - the heading becomes invisible rather than merely unstyled. That is a bad failure, and it is why the generated CSS includes the webkit-prefixed form alongside the standard one.
It also means the effect is purely visual. Screen readers get the real text, copy and paste works normally, and search engines read it as text, which is the main reason to do it this way rather than exporting a picture of a heading.
Where to use it
Sparingly. One hero heading with gradient text looks designed; a page of them looks like a template. Keep it for the single thing you most want the eye to land on, and make sure both ends of the gradient are dark enough to read against the background - a gradient fading toward pale yellow on white is pretty and unreadable, which the Contrast Checker will tell you in a second.
How to use it
Open the tool, type your text, choose two colours and an angle, watch the preview, and copy the CSS.
When to use an image instead
There is a version of this done by exporting the heading as a picture, and it is almost always the wrong choice - the text stops being text, so it cannot be searched, selected, translated or read aloud, and it blurs on a high-resolution screen unless exported at double size.
The one case where an image genuinely wins is a heading using a typeface you cannot license for the web, with effects CSS cannot reproduce. Even then, the accessible version is an image with the real words in its alt text rather than nothing at all.
For anything a browser can draw, the CSS approach keeps the text real, which matters for search and for anyone who is not reading it visually.
Common questions
Does it work on any font?
Yes, though it reads best on large, heavy type where there is enough letter area for the gradient to be visible.
Will the gradient follow the text if it wraps?
Yes. The gradient applies across the element, so a heading on two lines gets a continuous transition down both.
Can I combine it with a text shadow?
Not easily. A shadow is drawn behind transparent text and tends to show through, which usually looks like a mistake.
Try it on your own heading: