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.
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/
Very nice, thanks for the link.
A quick try resulted in a wacky set :) http://dabblet.com/gist/2762909
Haha… ultra cheesy. I like that you’ve used cubic-bezier function for the transitions. I should really start using that myself.
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.
No, you won’t see an actual image, but you’ll see the styles that create the image, just like you’ll see other styles in the dev tools.
Did one more set http://dabblet.com/gist/2771602
Too bad I cannot use different transitions for the
background-positionor thebackground-sizeof different gradients that are part of the samebackground-image.Awesome I like this
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.
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.
please help me how to make CSS3 Repeat Linear Gradient to change background?
You need to provide more details, and explain exactly what you want. I don’t understand your question, it’s too vague. Thanks.
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