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.