DEV Community

Cover image for How to add a gradient overlay to text with CSS
Sarah
Sarah

Posted on • Originally published at fossheim.io

How to add a gradient overlay to text with CSS

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:

  1. Add the same gradient or pattern to both the text and as a background to regular elements
  2. Create different text overlays without having to repeat the clipping properties

Oldest comments (7)

Collapse
 
brianmcoates profile image
Brian

This is a really fun text color to play with

Collapse
 
khrome83 profile image
Zane Milakovic

Love it. It’s great to see fun stuff like this.

You do it much better than I did. Well done!

Collapse
 
fossheim profile image
Sarah

Thanks 😁 Do you have any of yours online somewhere? Would love to see what others are making

Collapse
 
pflash profile image
Precious adeyinka

You know what I love you, I could only think this possible with canvas and javascript! 🙏🙏Appreciate it!

Collapse
 
fossheim profile image
Sarah

Thank you ❤️

Collapse
 
atacrawl profile image
Dan Boland

Nice! I did this same idea (with animation!) for a client about a year ago here: continuumclinical.com

Collapse
 
milesmanners profile image
Miles Manners

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.