in ,

Easy Cross-Browser Text Masks with Blend Modes

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!


View Tutorial

Written by Fribly Editorial

Fribly is a digital magazine where we will share useful and awesome stuff for your inspiration and benefit.
We will hope to bring you daily resources and inspiration from all around the web. You just sit back and enjoy, and we will do all the search work for you. We will strive to find the best and most useful stuff out there.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

GIPHY App Key not set. Please check settings

    How to Create a Drinking Straw Text Effect in Adobe Illustrator

    CIRCO Free Font