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:
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>);