Estimated reading time: 2 minutes, 30 seconds
Estimated reading time: 5 minutes, 30 seconds
Estimated reading time: 2 minutes
There are many ways to do text clipping masks (the appearance of graphics or effects inside letterforms) on the web, but the techniques are all somewhat scattershot: Chrome and Safari have long supported
-webkit-background-clip:text;, but that only addresses two browsers; there is also an SVG technique, but that has limitations also.
After experimenting with blend modes I realized it was possible to use them to create text clipping masks by “sandwiching” text and backgrounds. One nice advantage is the technique is not only fully cross-browser (with the exception of IE), but it’s also naturally progressive, with elegant fallbacks.