Gradient Text With CSS

July 10, 2019 by Andreas Wik

There is a really quick and nice way to use beautiful gradients instead of a plan color for text using CSS.

The answer is using a background gradient in combination with background-clip: text; and -webkit-text-fill-color: transparent;

Like so:

h1 {
  font-weight: 900;
  background: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 72px;
}

 

It is worth noting that Internet Explorer 11 and below don’t support -webkit-text-fill-color, so do take a look at caniuse and consider workarounds for non supporting browsers, perhaps using Modernizr to detect support.

Here’s a CodePen showing it in action:

See the Pen Text gradient by Andreas Wik (@andreaswik) on CodePen.

Share this article

Recommended articles

@awikio