Jan's Development Microblog
Go back to blog overview
| Jan Valkenburg | CSS | Reading time: 4 min

Fade-out text using the CSS background-clip attribute

Just by the end of last year, I learned a new trick on how to fade out text using the CSS background-clip attribute. In this post, I will show you how to do it.

A few days before the start of the holidays I got a question from a colleague at work if adding a fading-out text on a section with a video or photo background was possible. After some thought, I came up with a solution for it. Luckily this was possible to do. There is only one way to do this using CSS to fix this. As far as I’m aware. And that is by using a clipping mask on the text itself.

So, after a quick search on the internet I found the CSS code on how to create this fade-out using the background-clip: text; attribute. The best thing is that you'll only need three lines of CSS to do this. I have added all the three lines you need in the snippet below. This trick should work in all modern internet browsers, so in my opinion, it is safe to use.

background-image: linear-gradient(180deg,
    #ffff calc(100% - 6rem),
    #fff1 calc(100% - 1rem),
    #fff0 100%);
background-clip: text;
-webkit-text-fill-color: transparent;

How to setup the fading out text using background-clip?

First, we need to set a background color. In our example, we use a default text color of white. As we need to define a fade-out effect we should combine it with the background color. To do this, we must create a linear gradient from white to transparent. As we don't want to start the fade-out directly we should set a starting point. I have chosen an offset of 6rem and a harder cut-off of 1rem from the bottom. One thing I learned while writing this is that it was possible to use calc() to calculate the offset within a linear-gradient. I have never used this trick before.

The second part is to clip the background gradient on the text. We must use the background-clip: text; attribute for this. Now the background image is rendered within the text itself. At this point, the fade-out is not visible yet.

For this, we have to do one last step and that is removing the color of the text itself. To remove the text color we can use the attribute -webkit-text-fill-color: transparent; or just use color: transparent;. The last one I just discovered while writing this blog post. I was not aware that this was also an option. However, I think it is best to stick with -webkit-text-fill-color: transparent; in case this property is not supported in your browser. So the text will always have a fall-back color.

CodePen example of background-clip: text

I have created a code snippet on CodePen for this so you can see how it looks and works in your own browser. You can see this snippet here below or you can view it on CodePen using this link.

Final word

Thanks to my colleague at work I learn a new trick. I really hope you've also learned something new from my blog post. CSS has many little tricks that most of us are unaware of and something we need to think a little outside of the box to get things done. I might use this trick in the future more often on websites I will build.

「知識のメロディーは私たちの生活の背景で奏でられています。注意深く聞き、毎日新しい音符を見つけるでしょう。」— The melody of knowledge plays in the background of our lives. Listen closely, and you'll discover a new note every day.