How background-clip text paints gradient type
The five CSS lines behind gradient text, why the webkit prefix persists, and how to keep the effect accessible and cross-browser.
Five lines doing one job
Gradient text is not a single property but a small stack of them working together. First a gradient is set as the element background. Then background-clip: text tells the browser to trim that background so it only shows inside the shapes of the characters. Finally the text fill color is made transparent, which lets the clipped background show through where the ink would normally be. Remove any one line and the effect collapses back to ordinary solid text.
Why the webkit prefix still matters
The text value of background-clip started life as a WebKit extension before it was standardized. Even today, several browsers only honor it through the -webkit-background-clip property, and the transparent fill needs -webkit-text-fill-color to behave consistently. That is why the generated block lists both the prefixed and the unprefixed forms. Shipping only the standard properties would leave the text solid or invisible for a slice of visitors.
Linear versus radial fills
A linear gradient sweeps color along a straight line whose direction you set with an angle, so 90deg flows left to right and 45deg runs on a diagonal. A radial gradient instead spreads color outward from a center point in a circle, which reads as a soft glow rather than a directional band across the text. The tool hides the angle control for radial fills because there is no single line to aim. Try both against your typeface, since the same colors can look very different on wide letters versus narrow ones.
Keeping gradient text accessible
A transparent fill is risky, because if the background fails to render the text can vanish entirely. Guard against that by setting a solid, readable color on the element or a parent so there is always a fallback. Keep enough contrast between the gradient colors and whatever sits behind the element, and avoid running critical body copy as gradient text, since low-contrast or thin type is harder to read. Treat the effect as decoration for large headings rather than a default for every line.