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

How to add a gradient overlay to text with CSS

fossheim profile image Sarah Originally published at fossheim.io ・3 min read

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

Posted on by:

fossheim profile

Sarah

@fossheim

(they/them). Technologist + designer. Interested in ethics, accessibility, inclusivity and AI/ML. Often having fun with css.

Discussion

markdown guide
 

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

 

This is a really fun text color to play with

 

Your post made my day! Thanks! 🥰

 

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

 

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