Aug 17, 2010

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), color-stop(i, j));

This entry was posted by Boaz Sender on August 17, 2010 in Chrome, CSS3, Firefox, Gecko and WebKit.