(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirements for Attention Grabber Animation in Elementor –
1 – Elementor Pro (Custom CSS) OR
2 – Any Alternative CSS Option
We will be making below Animated Gradient Headings.
Mindset Mastery: EMPOWERING Your Journey To Personal GROWTH And SUCCESS
Mindset Mastery: EMPOWERING Your Journey to Personal GROWTH and SUCCESS
To target specific keyword instead of the whole text. Use the HTML tag <span class=”gradientHighlight”>Your text here</span> .
To add specific colors to text except the gradient ones, add HTML tag <font color=”#fff”> Your text here </font>
You can create your own gradient here – https://cssgradient.io
.gradientHighlight {animation: movegradient 4s linear infinite;
background-image: linear-gradient(to right, #77f, #33d0ff, #25ffbb, #33d0ff, #77f);
background-size: 200% auto;
-webkit-background-clip: text;
}
@keyframes movegradient { to { background-position: 200% center; } }
