Gradient is one of the most useful new specs in CSS as far as I'm concerned. The biggest downfall, however, is the differences in implementation between browser vendors. All though Webkit was the one to introduce the specification (which was later adpoted by the W3C) its implementation is the most different from that of both the W3C and Mozilla. Can't wait to see what Microsoft and Opera come up with. *sigh*
Let's get right to it, eh? There are (thus far) two ways to define a gradient, mainly due to the fact that there are two different types of gradients-- linear and radial.
-webkit-gradient([linear|radial], point [, radius]?, point [, radius], stop, stop [, stop]*)
A little bit of explanation is due, the first argument is of course the type of graident, linear or radial. The 2nd and 3rd arguments define where the gradient begins, where it ends, and (optionally) the radial gradients allow for a radius to be specified for each point.
Each one of the stops are declared with the color-stop method. Each color-stop takes a decimal number value from 0.0 to 1.0 representing its place in the element, and secondly a color.
-webkit-gradient(linear, left top, left bottom, color-stop(0.0, red), color-stop(1.0, orange));
You can of course have as many color-stops as you wish, and for simplification, webkit provides a start(COLOR) and stop(COLOR) color-stop short cut, which represent color-stop(0, COLOR) and color-stop(1, COLOR) respectively.
Radial gradients are too much different save for a few details.
-moz-[linear|radial]-gradient(point [, radius]?, point [, radius], stop, stop [, stop]*)
/* First background-image statement is for browsers that do not support gradients. */ background: #91be15 url(/library/media/images/green_button_gradient.jpg) repeat-x; background-image: -moz-linear-gradient(top, #91be15, #84b710 27px, #7ab200 27px, #86bb08); background-image: -webkit-gradient(linear, left top, left bottom, from(#91be15), color-stop(0.5, #84b710), color-stop(0.5, #7ab200), to(#86bb08));
/* First background-image statement is for browsers that do not support gradients. */ background-image: url(/library/media/images/html5_css3_gradient_1.jpg); background-image: -moz-radial-gradient(center 45deg, circle, orange 0%, red 100%); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 270, from(orange), to(red));
/* First background-image statement is for browsers that do not support gradients. */ background-image: url(/library/media/images/html5_css3_gradient_2.jpg); background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(orange), to(red));
With as much as there is to learn with gradients, I would be remiss if I didn't provide some of the resources I've used myself to learn about CSS gradients, so here ya go!