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 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.
Check out this Pen!
GIPHY App Key not set. Please check settings