Update: I wrote this arti­cle in 2009. In ear­ly 2011 WebKit decid­ed to change their syn­tax to match that used in Fire­fox (and the W3C spec­i­fi­ca­tion). The syn­tax con­tained in these arti­cles will be main­tained for rea­sons of back­wards-com­pat­i­bil­i­ty, but you should use the new syn­tax for the future. I’ve writ­ten a post about the new radi­al gra­di­ent syn­tax.

In the first part of this post I gave a pot­ted his­to­ry of the dif­fer­ing syn­tax­es, and pro­vid­ed an overview of how that affect­ed lin­ear gra­di­ents. In this sec­ond part I’m going to look at radi­al gradients.

Here the syn­tax­es diverge slight­ly more, with WebKit requir­ing more val­ues than Mozil­la; while that adds some flex­i­bil­i­ty, it also increas­es the complexity.

I’ll be using the same page of exam­ples, which you’ll need to view in Safari / Chrome (or oth­er WebKit deriv­a­tive) or Fire­fox 3.6 (beta 3+):

CSS Gra­di­ents com­par­i­son: Mozil­la & WebKit

Radial gradients

As with lin­ear gra­di­ents, the key dif­fer­en­ti­a­tion between the Mozil­la syn­tax and the WebKit syn­tax is that the lat­ter requires a start and end point, where­as the for­mer is con­strained by the bound­ing box.

You can see in this first exam­ple (Radi­al 1) that the Mozil­la syn­tax is much short­er when mak­ing a sim­ple two-colour radi­al gradient:

-moz-radial-gradient(green, yellow);
-webkit-gradient(radial, center center, 0, center center, 70.5, from(green), to(yellow));

In Mozil­la’s case I set only start and end color-stops; for WebKit I must spec­i­fy a posi­tion (50% 50%) and radius (0 — I’ll explain that lat­er) for the start point, and a posi­tion (50% 50%) and radius (70.5) for the end point, as well as the color-stops.

As far as I can see the radius val­ue has to be a val­ue in pix­els, so in order for the end radius to be the diag­o­nal of the square (where Mozil­la defaults to) you need to use the cal­cu­la­tion (side)(sqrt(2)) — or, do what I did and use this online cal­cu­la­tor.

In the next exam­ple (Radi­al 2) I’ve off­set the cen­ter of the gra­di­ent and set it to end at the fur­thest edge of the con­tain­ing box:

-moz-radial-gradient(40% 40%, farthest-side, green, yellow);
-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(green), to(yellow));

And then used the same cen­ter off­set but con­strained the radius to the dis­tance of the near­est wall (Radi­al 3):

-moz-radial-gradient(40% 40%, closest-side, green, yellow);
-webkit-gradient(radial, 40% 40%, 0, 40% 40%, 40, from(green), to(yellow));

As you can see, Mozil­la takes a series of con­stants using nat­ur­al lan­guage — farthest-side, closest-side, contain, etc — to set the lim­its of the gra­di­ent, where WebKit accepts only pix­el val­ues. The advan­tage to the for­mer approach is that the syn­tax is sim­pler and no cal­cu­la­tions are required; the dis­ad­van­tage is that if you want to cre­ate a radi­al gra­di­ent that is small­er than the lim­its of the con­tain­ing box, you have to com­bine it with the background-size property.

Next (Radi­al 4) I’ve set the cen­ter of the gra­di­ent to the top-right cor­ner, using three colours equal­ly dis­trib­uted; here’s where you can start to see the WebKit syn­tax start to become real­ly unwieldy:

-moz-radial-gradient(right top, green, yellow, blue);
-webkit-gradient(radial, right top, 0, right top, 141, from(green), color-stop(50%, yellow), to(blue));

With WebKit I again have to spec­i­fy start and end points (with radii), and also spec­i­fy the stop posi­tion of the mid­dle colour. Both out­comes are the same, but the Mozil­la syn­tax is sig­nif­i­cant­ly easier.

One aspect of WebKit’s syn­tax which allows for more flex­i­bil­i­ty in a gra­di­ent is the start point and end point; by pro­vid­ing two sep­a­rate val­ues you can set the start gra­di­ent at a dif­fer­ent point to the end gra­di­ent, as well as pro­vid­ing dif­fer­ent radius val­ues, allow­ing for effects that Mozil­la can’t eas­i­ly repli­cate (Radi­al 5):

-moz-radial-gradient(60% 60%,circle contain,yellow,green 75%,rgba(255,255,255,0));
-webkit-gradient(radial,45% 45%,5,60% 60%,40,from(yellow),color-stop(75%, green),to(rgba(255,255,255,0)));

You can see how that is ren­dered here (Mozil­la on the left, WebKit on the right):

Achiev­ing the same effect is only pos­si­ble in Mozil­la by using mul­ti­ple val­ues on the background-image prop­er­ty, along with background-size (Update: This isn’t nec­es­sary; see Tab Atkins Jr’s com­ment, below).

Conclusions

While the (orig­i­nal) WebKit syn­tax does allow for a few effects that the sim­pler Mozil­la imple­men­ta­tion can’t eas­i­ly copy, I think these are real­ly edge cas­es and the sim­plic­i­ty of the new­er syn­tax is more than ample com­pen­sa­tion. It seems the CSS WG agree, which is why the sim­ple syn­tax is to become an offi­cial pro­pos­al; I hope the WebKit team accept the pro­pos­al and imple­ment it soon.

It was sug­gest­ed that I also com­pare these with Inter­net Explor­er’s Gra­di­ent fil­ter, but that’s a brows­er-spe­cif­ic imple­men­ta­tion that has no chance of becom­ing a stan­dard, so I did­n’t feel it was suit­able for this arti­cle; per­haps in a future extension.

Update: Just after I fin­ished this arti­cle, Mozil­la Hacks pub­lished an in-depth look at the new syn­tax.