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:
