Animated gradient text in CSS
There might be some elements on your website that you may want your users to draw their attention to. For instance, the title of your blog post, an important announcement, or the call-to-action button.
And one of the ways to do so is by using gradient-y fonts. But it’s even better if you can animate the gradient effect on the font. Something like this.
Memento Mori
Turns out, it’s not that difficult to achieve this effect. Consider the following HTML markup.
<div>
<p>Memento Mori</p>
</div>
We’ll be using the following CSS to animate the gradient effect on the text.
p {
background: linear-gradient(
to right,
#7953cd 20%,
#00affa 30%,
#0190cd 70%,
#764ada 80%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 500% auto;
animation: textShine 5s ease-in-out infinite alternate;
}
Along with the above CSS, we’ll also need to add the following keyframe animation.
@keyframes textShine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
What happens here is, we’re animating the background-position property of the p element from 0% to 100% in a span of 5s with an ease-in-out timing function. And we’re doing this animation infinitely.
Setting the background-size property to 500% auto ensures that the gradient effect is applied to the entire text. And the background-clip property is set to text to ensure that the gradient effect is applied only to the text and not to the background.
The --webkit-text-fill-color and text-fill-color properties are set to transparent to ensure that the text is not visible. And the background property is set to the gradient effect which will be used as the basis for the animation.
And that’s pretty much it. You can tweak the animation duration, timing function, and gradient effect to your liking.
I’ve created a CodePen for you to play around with the above code.
See the Pen Animated gradient effect using CSS by Amit Merchant (@amit_merchant) on CodePen.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
