Webkit Radial Gradients

I started to play around with the inset value of the CSS3 box-shadow property over at boaz.se/nder/s.miscellaneous/i-<3-inset after maxvoltar posted about it.

I started working with the CSS3 gradient property to achieve the effect reproduced here, and I ran into some serious syntax confusion. Whereas Gecko offers a terse verbose syntax for radial gradients, Webkit only offers the verbose syntax. So here is an explanation in plain english of what each value in a Webkit radial gradient does:

-webkit-gradient(radial, a b, c, d e, f, from(g), to(h));

a: circle 1 x-axis
b: circle 1 y-axis
c: circle 1 radius
d: circle 2 x-axis
e: circle 2 y-axis
f: circle 2 radius
g: circle 1 color
h: circle 2 color

I’ve reproduced the contenteditable from boaz.se below in order to play with gradients!:

Gecko’s implementation offers the same flexibility as Webkit, however, Gecko also offers a simplified version for achieving your basic, plain old two color, even gradient: -moz-radial-gradient(#fff, #999)

Oh hey, what the heck is a color stop?!

A color stop is what the color value should be at a given point in the gradient. You can add in more than one. You can add one in like this:

i: point in gradient at which to stop (number, percent, etc)
j: color at which to stop (hex, etc)
-webkit-gradient(radial, a b, c, d e, f, from(g), to(h), <strong>color-stop(i, j)</strong>);