Type painted with a gradient
Caveatcolor: transparent is doing the work, so if the background fails to paint for any reason the text is invisible rather than merely unstyled. Never put a whole paragraph in it, only display type you can afford to lose.
FallbackKeep the -webkit- prefixed property alongside the standard one. This is one of the few places where the prefix is still load-bearing rather than historical.
.headline {
background: linear-gradient(100deg,
#6fa8dc, #f6b26b);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* the whole trick */
}Published
Questions
Why is my gradient text invisible instead of just unstyled?
Because color: transparent is what reveals the background, so anything that stops the background painting leaves you with nothing at all. That is the reason to keep this for display type you can afford to lose, never for body copy.
Do I still need the -webkit- prefix for background-clip: text?
Yes. This is one of the few places where a prefix is still load-bearing rather than historical — ship -webkit-background-clip: text alongside the unprefixed property, not instead of it.
Why does the gradient restart on every line when the text wraps?
The background is painted per fragment once the line breaks. -webkit-box-decoration-break: clone makes each fragment carry its own copy deliberately; if you want one gradient across the whole block, keep the type to a single line.