background-clip: text

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 9 Aug 2026