CSS Text Image Mask Generator
Note: Keep this for large display type. Gradient-filled text has no single contrast ratio to test against WCAG, and the light end of a gradient over a light background is genuinely unreadable for some people. Never use it for body copy.
The trap is that the two halves fail separately. color: transparent applies unconditionally — it is decades old and universally supported. background-clip: text is the newer half. If anything prevents the background from painting — an image that 404s, a print stylesheet, a browser extension stripping backgrounds, a high-contrast mode — you are left with transparent text on nothing, and the headline is simply gone. Nothing on screen, nothing in a screenshot, nothing on paper.
The defence is an @supports block: set a solid colour by default, and only make the text transparent inside a query that confirms background-clip: text is understood. That way the failure mode is a plain coloured headline instead of an empty space. It is four extra lines and this generator always writes them.
The accessibility position is worth stating plainly. Text filled with a gradient has no single contrast ratio, so it cannot be checked against WCAG in the usual way — and the light end of a gradient over a light background genuinely is unreadable for some people. Keep this for large display type where the letterforms are big enough to survive, use a gradient whose darkest point still passes against the background, and never apply it to body copy.
Printing is the other reliable failure: most browsers do not print background images by default, so a gradient headline prints blank unless you handle it.
Frequently Asked Questions
Why has my heading disappeared?
Because color: transparent applied but the background did not paint — a failed image, a print stylesheet, a forced-colours mode. The two halves of the technique fail independently. Wrap the transparent colour in @supports (background-clip: text) so the fallback is a solid colour rather than nothing.
Do I still need the -webkit- prefix?
Yes, for Safari, which still requires -webkit-background-clip and -webkit-text-fill-color. Write both the prefixed and unprefixed forms — the generated CSS includes them in the order that works everywhere.
Is gradient text accessible?
Not straightforwardly. It has no single contrast ratio to test, and the lighter end of a gradient can be genuinely unreadable against a light background. Restrict it to large display type, make sure the lightest point still passes against your background, and never use it for body copy.
Why does it print blank?
Because browsers do not print background images by default, and the fill is a background. Add a print media query that restores a solid colour and turns off the clipping, or the headline is an empty space on paper.
Can I animate the gradient inside the text?
Not the gradient itself, since background-image is not animatable. The usual approach is an oversized background with background-size around 200%, animating background-position — which does animate, and produces the shimmer effect people are usually after.
