Adding a Gradient to Text with CSS
CSS Gradients
You have probably used or at least seen a color gradient used on a web page to add a great splash of color to a header or other section of a website. You almost always see this applied as a background to a block on the site.
When applied to a block element the technique for this is pretty straight forward. You just need to set the background property to use a linear gradient like this.
body {
background: linear-gradient(to right, #ee0979, #ff6a00);
}
This is such a common use case that you can find many great preset gradients to use and interactive gradient editors to create the CSS for you. But what if you want to apply a gradient to text and not a block element?
Tricking the Browser in to Applying a Gradient to Text
Fortunately there is a cool trick you can do to get the browser to apply your gradient to text, although it's a little sneaky. It involves still applying the gradient to the background of an element, but then masking the background of that element with its own text, then making the text transparent so you can see the background through it.
h1 {
font-size: 6rem;
background: linear-gradient(45deg, #f3ec78, #af4261);
}
Start out the same way as before when applying the gradient to the body element. The only change we made so far was applying the gradient to the h1 tag instead. After doing this you will see a background sitting behind the text, but part of the h1 element now. The text color will still be black.
Make the following changes to flip that around so we only see the gradient where the text is, and not in the background.
h1 {
font-size: 6rem;
background: linear-gradient(45deg, #f3ec78, #af4261);
/*highlight-start */
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
/*highlight-end */
}
This change adds two properties to the CSS rule. Those are background-clip and text-fill-color. Setting background-clip to text will hide the background that does not intersect the text, and setting text-fill-color to transparent will make the text transparent.
The -moz and -webkit vendor prefixes are required for both of these rules to work properly because browser support is still new and there are a few gotchas when using them with gradients. For more information on restrictions on using these rules visit caniuse.com
Fixing the gradient scale to match the text.
At this point you should see a nice gradient on the h1 tag text. But we are getting much more of the yellow side than the bright pink on the right. This is because even though we see the gradient on the text, secretly it is still applied to the background of the h1 tag, it's just that all of the background which does not overlap the text is hidden, and the text is transparent so it shows through.
To fix this you can adjust your h1 tag style so that the bounding box for the element is the same as the space taken up by the text. One way to do that would be to make the display property for the h1 tag inline-block.
h1 {
font-size: 6rem;
background: linear-gradient(45deg, #f3ec78, #af4261);
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
/*highlight-start */
display: inline-block;
/*highlight-end */
}
Adding that should make the gradient look a bit better. Be warned that this will change the behavior of the h1 tag. It will no longer take up all of the horizontal space in its row. If you need that you could add another div around it with 100% width or you could try using the background-size property instead of display to tweak the look of your gradient.
To see a working demo of everything we just covered here is a Code Sandbox illustrating the 3 steps in the process. Try applying different gradients and combining this trick with CSS animation to create an effect all your own. For some cool gradients to try out visit uiGradients