How to make text gradient is a simple CSS trick

Before you figure out how to make the text a gradient, look at the result. That’s what we’ll get in the end:

See the Pen CSS Gradient text effect by Pochemuta (@pochemuta) on CodePen.

For convenience, configure the appearance and behavior of the parent.

body { display: grid; place-items: center; height: 100vh; background: #000; }

Then let’s style the header:

h1 { font-family: Roboto, Arial, sans-serif; font-size: 10vmax; background-color: #2AA5A0; background-image: linear-gradient(90deg, #E3535D, #2AA5A0); }

In any case prescribe a spare color — background-color: #2AA5A0. Even if the gradient does not work, text will not be lost in the background.

Here is the intermediate result:

The gradient is, the gradient of the text yet

Now add a little magic to get gradient text:

h1 { font-family: Roboto, Arial, sans-serif; font-size: 10vmax; background-color: #2AA5A0; background-image: linear-gradient(90deg, #E3535D, #2AA5A0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

It remains to understand what happens:

property-webkit-background-clip: text leaves only the gradient under the text;
property-webkit-text-fill-color: transparent makes the text color transparent.

In effect, the text becomes a gradient. However, through him you now see the gradient, that is the problem we decided.

Here’s another example of how you can use the same properties. Uncomment the text-shadow, change the radial gradient to linear-gradient — effects will differ markedly.

See the Pen CSS Gradient text effect-shadow by Pochemuta (@pochemuta) on CodePen.

Supports all modern browsers. Exception — Internet Explorer. But to use -webkit-text-fill-color need with caution. This is not a standard property, whose behavior may change in the future.

Support looks good, but there are nuances

More interesting material:

CSS Scroll Snap is a powerful tool for creating scrollable containers without JavaScript
How does the CSS Flexbox: a visual introduction to the layout of elements on a web page
How to become a frontend developer in 2021: a road map