CSS Code for background gradients on headings in Elementor
How to Setup Snippet
Use class text-fill on a heading to create the gradient headline effect Note: Don’t forget to add a gradient to the headline before adding the class, otherwise adding the class will just hide the heading
/***
* Title: CSS Code for background gradients on headings in Elementor
* Name: Roy Eyal
* Class name: text-fill
* Instructions: Use class text-fill on a heading to create the gradient headline effect
* Note: Don't forget to add a gradient to the headline before adding the class, otherwise adding the class will just hide the heading
* Video URL: https://youtu.be/KwIkigxZ-oM
* Code only will work on browsers that support background-clip & text-fill-color
* https://caniuse.com/?search=background-clip
* https://caniuse.com/?search=text-fill-color
*/
@supports (background-clip: text) {
.elementor-widget-wrap .text-fill .elementor-heading-title,
.e-container .text-fill.elementor-widget-heading .elementor-widget-container {
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
}