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
