Menu
How do I add an animation from plain color to background gradient color when hovered? Possibly when hovered from left to right?
I have this sample code but when hovered it is too instant when changing the colors.
I've tried using these references:
Use CSS3 transitions with gradient backgrounds
Animating Linear Gradient using CSS
But can't seem to figure out how to have an easiest approach for the hover. Other references say to add pseudo after element when hovered, but it seems a bit complicated when using it. Just want to use the hover element when animating the gradient text to it.
How to add a transition with these types of gradient text colors?
SAMPLE CODE:
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition:all 0.4s ease-in-out;
}
.hover-grad-txt:hover {
background-image:linear-gradient(to right, #01A5F8, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<span class="hover-grad-txt">Spear</span>
799
To animate it, instead of trying to animate the gradient, you could animate it's position.
Let's use a new linear gradient for you background.
It will go from the solid color, then it will be a gradient to your
first color from the gradient, then it will be a gradient to the second color of your gradient.
Something like this:
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
Then you adapt the size to only see the solid color:
background-size: 300% 100%;
And it's position:
background-position: top left;
All you need to do on hover is to move it:
background-position: top left 100%;
.hover-grad-txt {
font-size:100px;
text-align:center;
color:#191335;
background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 300% 100%;
background-position: top left;
transition:all 1s ease-in-out;
}
.hover-grad-txt:hover {
background-position: top left 100%;
}<span class="hover-grad-txt">Spear</span>Using new CSS properties, you could also do it like this:
<!DOCTYPE html>
<html>
<head>
<style>
@property --a {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
@property --b {
syntax: '<color>';
inherits: false;
initial-value: #191335;
}
.hover-grad-txt {
transition: --a 0.5s, --b 0.5s;
font-size: 100px;
text-align: center;
background-image: linear-gradient(to right, var(--a), var(--b));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hover-grad-txt:hover {
--a:#01A5F8;
--b: #01BFD8;
}
</style>
</head>
<body>
<span class="hover-grad-txt">Spear</span>
</body>
</html>Keep in mind it only works in Chrome. Also, look at this question.
38
answered Oct 24 '25 01:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With