Change gradient color on hover
Hi, I'm trying to change the color of a gradient on hover, but it doesn't seem to work, and I also don't understand what the Figma file means when it shows 3 different HSL colors here:
8 Replies
i think the third a white with opacity laying on top op de color gradient. you see the gradient seems lighter than the actual colors. so i think the first two colors are for the normal state and for he hover the white on top
https://jsfiddle.net/bskxp9hg/8/
I tried doing this but nothing happened
Oops, I changed it from
background-color to background but now the button disappears completelyYou can't transition a gradient, because it's a background-image, which isn't an animatable property.
You sort of need to cheat right now, and make the gradient larger than it needs to be and animate it's position. Hard to explain in words, but I have a video on it.
https://www.youtube.com/watch?v=f3mwKLXpOLk
Kevin Powell
YouTube
Fun ways to animate CSS gradients
Keep up to date on my Learn Responsive Web Design course - https://www.kevinpowell.co/learn-responsive
Gradients are background-images, so we can't set up a transition on that property. It's one of the ones we simply cannot animate with CSS.
Luckily, we can animate background-position, so combining that with background-size, we can do some fun...
Thanks! I'll check that out now 🙂
Eventually we'll be able to do it custom properties and using
@property, so we can animate each color within the gradient. Browser support sucks atm though.if you want a fade effect (instead of slide), you can use a pseudo element to put the hover state in and use opacity for the transition
https://codepen.io/MarkBoots/pen/PoaqxgV
Thanks! That was helpful!