Pure CSS Gradients

CSS Gradients
One of the many cool CSS additions to come out of Webkit is the ability to specify gradients. Whereever you would normally specify an image using a url() syntax, you can specify -webkit-gradient instead. Probably the most likely scenario will be for background images but you could use it for border-image or list-style-image, too.

background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#496178), to(#2E4960));

The syntax takes a gradient type as the first parameter: linear or radial. The next two values indicate the start and stop points of the gradient. Each parameter after that is a color-stop(x, y) function where x is a percentage or a value between 0 and 1 and y is the colour value. from and to are shortcuts for color-stop(0, y) and color-stop(1, y) respectively. This implementation mirrors the functionality within the canvas specification.
CSS gradients have made their way into the W3C as a draft spec, although the syntax is different from how Webkit has implemented it. Firefox 3.6 has just been released and now includes CSS gradients using this newer syntax which separates the two types of gradients into their own syntax: -moz-linear-gradient and -moz-radial-gradient.

background-image: -moz-linear-gradient(90deg, #496178, #2E4960);

The first parameter is the position or angle. There are a number of ways
that the shorthand can be calculated and degrees are likely the easiest
to use. If you're doing a gradient from top to bottom, the angle can be
ignored altogether and the colour stops are all that need to be
specified.

 background-image: -moz-linear-gradient(#496178, #2E4960);

There's no need to specify the color-stop, from or to functions like with the webkit gradients. You can specify multiple colour stops and it'll create a gradient between each one. If you wish to adjust the position of where the gradient transitions, you can specify it as a second value with the color stop.

background-image: -moz-linear-gradient(#496178, #323232 20%, #2E4960);

You can also use values, too, if you wanted to create semi-opaque gradients.