How to create a background clip text with elementor and css?

1+
Ever wonder how you can create a great looking background text clipping mask? Here how you can do it. First add you heading or text. Set the proper size and font family. Now give that heading a CSS class. In my case it is ‘mask_text’. Go to Advanced > Background. And set the image you want to clip as a background. You can set any background position. Set the background size to cover.

Now lets add some CSS.
Elementor wraps every widget with div called ‘elementor-widget-container’. We need to target that class. We need to set ‘background-clip’ property to ‘text’.
We need to provide browser prefix so that it supports in every browser.

.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;

  
}

You will see the background is gone and text is back to its original color. To fix that we need to change our text color to transparent.

.mask_text .elementor-widget-container h2{
color:transparent !important;
}

If you use H2 then it will be ‘h2’. If you use H1 then it will be ‘h1’. For text it will be ‘p’.

As you can see the background clip is working perfectly now.

Let’s animate it now !!!

We need to add a ‘animation’ property. That will have a animation name (you can use any name) , duration , type and loop. Here is the code
.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;
  animation: maskText 10s linear infinite;
    -webkit-animation: maskText 10s linear infinite;
  
  
}
Now lets make the keyframe animation.
@keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}

}

We will animate the background position. It will start from 0px to 2000px (any bigger value).

And we are done 🙂

Here is the full codes:

.mask_text .elementor-widget-container{
background-clip:text;
 -webkit-background-clip:text;
  -moz-background-clip:text;
  -o-background-clip:text;
  animation: maskText 10s linear infinite;
    -webkit-animation: maskText 10s linear infinite;
  
  
}

.mask_text .elementor-widget-container h2{
color:transparent !important;
}

@keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}

}

@-webkit-keyframes maskText{
  from{ background-position: 0px center}
  to{ background-position: 2000px center}

}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply