{"id":656,"date":"2024-01-25T17:02:29","date_gmt":"2024-01-25T23:02:29","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=656"},"modified":"2024-01-25T17:21:16","modified_gmt":"2024-01-25T23:21:16","slug":"fading-out-text-with-mask","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/fading-out-text-with-mask\/","title":{"rendered":"Fading Out Text with Mask"},"content":{"rendered":"\n

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<\/code>. Kilian Valkhof covered this recently<\/a>, rejecting the idea of an overlay gradient, and also offering the idea of using background-clip<\/code>. But mask<\/code> is the clear winner. Let’s get that sucker un-prefixed already!<\/p>\n\n\n

.fade-out-text<\/span> {\n  -webkit-mask-image<\/span>: linear-gradient<\/span>(to bottom, white, transparent);\n  mask-image<\/span>: linear-gradient<\/span>(to bottom, white, transparent);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n\n\n\n\n
The gradient technique is such a classic though. I remember playing with that<\/a> over a decade ago. Here’s a proper demo of masking though:<\/p>\n\n\n\n