Officially, gradients can’t yet be animated. However, using CSS filters, you can animate the color values within them, with a few conditions.

hue-rotate in both CSS and SVG (from which CSS3 filters are derived) moves the visual appearance of an element around the hsl color wheel: red at the top at 0 degrees, green at 120, etc. You might wish to think of hue-rotate as a filter that makes color values “redder”, “bluer”, etc, although its effects are usually more overt than that.  The hue-rotate filter is given a degree value depending where it is on the wheel: adding filter: hue-rotate(0deg) to an element that is purely red will make no difference, but increasing the degree value will shift the color of the element through the spectrum.

Filters can be animated, as I’ve shown previously, so we can apply an animated hsl filter to a gradient to sweep it through a range of colors. (I’ve activated the animations shown in this article on mouse hover, to reduce visual overkill. Because CSS3 filters currently only work in Webkit, the examples will only work in Safari or Chrome at this writing.)

The example on the left is fairly simple: a red-to-blue gradient hue-rotated through the entire spectrum. Stripped of vendor prefixes, the CSS is:

div {
	width: 100px;
	height: 200px;
	background: linear-gradient(
		#ff0000 0%,
		#1600ff 100%
		); 
	transition: 8s filter linear;
}
div:hover {
	filter: hue-rotate(360deg);
}

The second example at the top of this article uses an angled linear radient and CSS keyframes to produce an endless sweep of color:

@keyframes sweep {
	100% { filter: hue-rotate(-60deg);
}
div {
	background: linear-gradient(
		30deg, #030 0%,
		hsl(55, 100%, 20%) 100%
		);
	width: 768px;
	height: 200px;
}
div#sweep:hover { 
	animation: sweep 3s alternate infinite;
}

Note that hue-rotate works from the current hue of the element: it doesn’t jump to 0 degrees on the color wheel and proceed from there for every gradient.

While this technique works, it carries two major disadvantages:

• The colors used in the animation will always be presented in the order that hues occur in the color wheel: you cannot use this technique to transition directly from red to blue, for example. (You could, however, “leap” the gradient using the step animation option, or reverse through the color wheel by using negative values).
• Second, greyscale values can’t be animated this way: they lack any hue component to transition.

Under those limitations, the technique is a useful one; for broader application, SVG also has an gradient and animation option, but discussion of that will have to wait for another article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.