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