Animating CSS3 Gradients

The CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

To demonstrate this, I’ve created some CSS3 buttons that animate their gradients when you hover over them:

There’s nothing too complicated going on in the code here, and I’m certainly not the first one to write about or demonstrate this technique. But here’s the code from the second button in that demo page, just so you can see how this is done:

.two:link, .two:visited {
  background: #2876b2;
  background: linear-gradient(#2876b2, #549ad0);
  background-repeat: repeat;
  background-size: 100% 200%;
  transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
  background-position: 0 -102%;
}

I’ve explicitly defined the background on this button to repeat, but I didn’t need to do that; it will repeat by default. This is just to help illustrate what’s happening here. On hover, I’ve changed the background position, and when you combine this with the background-size value, it creates a slide-down type of effect. So the gradient, which repeats, is simply moving to a different position.

I’ve also kept the same state for hover, focus, and active, but you can animate to different states for all of those pseudo-classes.

The other gradient buttons on the demo page are a little more abstract in their animated behaviour, but the principle is basically the same: I have a set, repeating gradient with unique background-size values, and I’m animating the background by adjusting the background-position and/or background-size values.

I used this technique for the buttons on the HTML9 Boilerstrap website.

The possibilities with this are endless, but my silly little examples should serve to illustrate the concept. I’m sure you can come up with some nice effects with this technique, so post some in the comments if you like. If you want some nice gradients to mess around with, you can grab something from Lea Verou’s gradient pattern gallery.

43 Responses

  1. Jason Gross says:

    I recently published a similar article on my blog that explores using box-shadow as an alternative to creating gradients that can be animated. It goes along well with the methods demonstrated here: http://jasonagross.com/animate-background-gradients-with-css3/

  2. Ana says:

    A quick try resulted in a wacky set :) http://dabblet.com/gist/2762909

  3. msankhala says:

    As you said ” since CSS3 gradients are not really properties, but are actually images created by the browser.” Is there any way to get this image using developer tool like doing Inspect element in chrome. I think it is possible i have seen this when i was going through some tutorial but now i forget about that link i didn’t bookmark that.

  4. Ana says:

    Did one more set http://dabblet.com/gist/2771602

    Too bad I cannot use different transitions for the background-position or the background-size of different gradients that are part of the same background-image.

  5. Jason says:

    Awesome post I never thought of doing this but I like the way it looks. I can’t wait to try this on a new project, thanks for the inspiration.

  6. Mallen says:

    Amazing, worked for my blog! – Go check it out ( http://blog.vapordiscounts.com ) , I’ll be sure to checkout some more of your posts, and again, amazing work.

  7. seo jaguars says:

    please help me how to make CSS3 Repeat Linear Gradient to change background?

  8. this is fancy but you are limited to animating gradients with the same amount of stops. I just finished some work on a javascript tween framework that enables you to tween several things at once – gradients, borders, dimensions, rotation, etc.

    Wonder if the community might find something like this useful if I made it into a jquery plugin? Probably overly superfluous but still fun to experiment with.

    http://thewebkid.com/tweener

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).