Gradients

Syntax details:

http://dev.w3.org/csswg/css3-images/#gradients (w3c - currently Unofficial/Note)

http://webkit.org/blog/175/introducing-css-gradients/ (uses completely different syntax from current w3c document)

https://developer.mozilla.org/en/CSS/-moz-radial-gradient (adds proprietary prefix to w3c current document)

Linear gradient

Radial gradient

In Mozilla’s case set only start and end color-stops; for WebKit specify a position (50% 50% or center center) and radius (0) for the start point, and a position (50% 50%) and radius (70.5) for the end point, as well as the color-stops.

The radius value has to be a value in pixels, so in order for the end radius to be the diagonal of the square (where Mozilla defaults to) you need to use the calculation (side)(sqrt(2)) — or use this online calculator.

Generator Tool:

http://gradients.glrzad.com/

Tutorials:

Based on http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/

Mozilla tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

More on webkit:

http://webkit.org/blog/175/introducing-css-gradients/

Example

of aqua button without image and button tutorial

Create gradient code tool at WestCiv