Gradient Animation Trick

You can’t animate gradient colors in CSS. No, really. There are a lot of animatable properties, but the one used for gradients, background-image, is not on the list.

Fortunately, if you were looking to animate a simple light-to-dark gradient fade, then there’s a decent workaround. Use background-size to stretch your gradient to be taller than the element it’s on. Now you can animate background-position to slide the visible portion of your gradient up and down. The end result is an element with a smoothly animated gradient background that gets lighter and darker.

Here’s the (simplified) code. Don’t forget your vendor prefixes!

button {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
  
    /* ...and various other button styles */
}

button:hover {
    background-position: 0 0;
}

And here’s a demo. Actual implementation on left, visual explanation on right. Hover over the gray box to see the animation.

See the Pen Gradient Animation Trick by Will Boyd (@lonekorean) on CodePen

Update: I’ve received a lot of feedback (here and elsewhere). Very much appreciated! Just wanted to give a quick update with more info. The CodePen has some extra markup for the sake of the demo, but all you need is the single <button> and the CSS for it and its hover state. Chrome, Safari, and Opera have since added support to animate background-image. Check out this dancing banana to see. However, it only works with images. Gradient backgrounds are still not animatable.

Hey, you reached the end!

Feel free to check out my other blog posts or subscribe to my RSS feed. You can also click a tag below to see related blog posts.