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:

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.

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.

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.

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.

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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.