Clipping and Masking Text effect with CSS

If you are a designer, you maybe know what is Clipping and Masking effect in some design tools. If not, don't worry. In this example, we will know what is that and how to create it with CSS.

Step 1: Create an element to contain your text

Your text

Step 2: Add CSS code to create Clipping and Masking effect

.element {
 background: url("/texture.jpg");
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 color: transparent;
 font-size: 70px;
 text-transform: uppercase;
 font-weight: bolder;

In this example, we use an image is "texture.jpg" as a background-clip for the text, you can change any image that you want.

© 2019 4codev

Created with love by Sil.