Fading Out Text with Mask

Chris Coyier Chris Coyier on

If you’re going to fade out some text, I’m gonna call it and say the best way, while also being the easiest, is using a mask. Kilian Valkhof covered this recently, rejecting the idea of an overlay gradient, and also offering the idea of using background-clip. But mask is the clear winner. Let’s get that sucker un-prefixed already!

.fade-out-text {
  -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  mask-image: linear-gradient(to bottom, white, transparent);
}Code language: CSS (css)

The gradient technique is such a classic though. I remember playing with that over a decade ago. Here’s a proper demo of masking though:

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

7-Day Free Trial

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $363,806 contributed to date.