CSS Code for background gradients on headings in Elementor – 5 colors stops edition
How to Setup Snippet
Use class text-fill on a heading to add the gradient effect
/***
* CSS Code for background gradients on headings in Elementor - 5 colors stops edition
* Class name: text-fill
* Instructions: Use class text-fill on a heading to add the gradient effect
* Note: No need to add gradient background, as the code creates the gradients
* 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;
background-image: linear-gradient(to right,
#f06844,
#ee4c54,
#d45e95,
#9c6ca6,
#6583c1
)
}
}