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

<div class="element">
 Your text
Copy this code

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;
Copy this code

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.