CSS3 Animated Gradient Background

So far we have looked at CSS gradients as well as CSS animations. We are now going to combine them into a cool and interesting effect. This should be considered experimental and probably shouldn’t be used on any production sites unless you have the proper CSS fallbacks.

We are going to create a simple list where the background animates on the hover event so lets get started with some base markup.

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 

Pretty basic here. Nothing new or fantastic. Let’s also set some base CSS styles.

li {
    padding: 10px;
    margin: 10px;
    width: 200px;
} 

Now is the time for the gradient. We are going to do a 3 color gradient, two at the ends with a color stop 50% through. The markup looks like this:

background:-webkit-gradient(
    linear, left top, right top, 
    from(#FFD820),
    color-stop(50%,#FF8722),
    to(#FF3021)
);

background:-moz-linear-gradient(
    left,#FFD820,#FF8722,#FF3021
); 

For the animation we are going to want the background gradient to move to the left so we see the right most color. This may seem a little odd because you are thinking you should be already seeing the right most color since the gradient takes up 100% of the width. You are correct. We are going to change that with a new CSS property background-size.

-moz-background-size: 200%;
-webkit-background-size: 200%;
background-size: 200%; 

To start the animation we are going to need to declare some sort of movement or change on the hover event. In this case we want the background to move to the left (have a background position of right).

li:hover{
    background-position:right;
} 

To finish up the animation we actually need it to animate, so on the li we need to add this:

-webkit-transition:1s background-position linear;
-moz-transition:1s background-position linear;
transition:1s background-position linear; 

And there we have it, your background gradient should now be animating when you hover over it. A simple and effective technique that requires no images or javascript. As usual this will only work with Firefox 4 Beta 2 and Webkit browsers (Safari and Chrome).

View Demo