Originally posted on fossheim.io.
To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style:
background-image: <gradient>
background-clip: text
text-fill-color: transparent
Step 1: Add the gradient as a background
In this example we'll use a linear gradient, which can be drawn this way:
.gradient-text {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
To make the gradient cover the full width and height of your text field, set background-size: 100%
, which is what I did in this example.
Step 2: Clipping the background to the text
At this point we have our gradient in the background, and the text is displayed on top of it.
The next thing we want to do is setting background-clip: text
. This will only render the background where there's text. If you test this it will seem like your gradient has disappeared completely, which is because the text is still rendered as well, and the gradient layer is hidden underneath.
That's why we have to set the text-fill-color
to transparent
. It will remove the fill from the text, making the gradient visible again.
Step 3: Adding fallbacks
Gradients as background images clipped on top of text isn't supported by all browsers, so it's important to add fallbacks. We can do this by adding a background-color
property to the text as well.
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
Also keep in mind that not all gradients are supported equally. For example, in some browsers conic-gradients will not show. In those cases it's also possible to add a linear-gradient as a fallback to a conic-gradient.
.gradient-text {
background-color: #f3ec78;
background-image: linear-gradient(#f3ec78, #af4261);
background-image: conic-gradient(#f3ec78, #af4261);
}
In this example, the text will have a conic-gradient as overlay. If that doesn't work, it will show the linear-gradient. And in browsers where linear-gradients aren't supported either, the text will be rendered as the background-color instead.
This also means that if you want to add an actual background to the text, you'll need to add a wrapper to the text.
<h1 style="background-color: black;">
<span class="gradient-text">This text will have a gradient on top</span>
</h1>
More examples
Extra: Scalability
If (text) gradients are a big part of your branding, you could split this functionality in two parts: a class that renders your gradient as a regular background-image, and a different class to clip any background to th text.
The gradient:
.gradient-brand-primary {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
The text clipping:
.gradient-text {
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
This allows you to easily do two things:
- Add the same gradient or pattern to both the text and as a background to regular elements
- Create different text overlays without having to repeat the clipping properties
Top comments (7)
I remember getting really into gradient text a few years ago. My main usage was to use a thin animated gradient to have a moving dashed border. Granim was pretty good for smooth gradient text as well.
These are some excellent explanations and demos.
Nice! I did this same idea (with animation!) for a client about a year ago here: continuumclinical.com
This is a really fun text color to play with
Love it. Itโs great to see fun stuff like this.
You do it much better than I did. Well done!
Thanks ๐ Do you have any of yours online somewhere? Would love to see what others are making
You know what I love you, I could only think this possible with canvas and javascript! ๐๐Appreciate it!
Thank you โค๏ธ