CSS Gradients in Firefox

Over a year ago, the Webkit project introduced a fantastic new kind of Internet technology — the ability to create color gradients via CSS. This solves an age-old deficiency in the language which confined web developers and designers to either solid colors or images.

Today, that ability had taken root in the mighty rendering engine that powers Firefox.

There are some major differences between the implementations, which this article will now explain:

(1) Placement of Type

Webkit includes the type of gradient as an argument of a gradient function; Gecko (Mozilla Firefox) includes this definition in the property name. Hence, to declare a radial gradient:

background: -moz-radial-gradient(…);
background: -webkit-gradient(radial, …);

The Webkit implementation would probably be much more practical if there were many types of gradients. Currently, there are only linear and radial supported. One could argue that because the rest of the syntax is identical for both linear and radials, the type is interchangeable and two separate properties are unneeded for what is essentially the same function.

That argument will certainly come up when this feature is standardized.

EDIT: I forgot that radials require an additional radii argument. The two functions then have different parameters, and are NOT essentially the same.

(2) Units of Measurement

Webkit supports only positioning keywords, percentages, and unitless numbers (<number>) that end up interpreted as pixels (<point>). Gecko, instead of supporting unitless numbers, mandates actual units of measurement (<length>):

background: -moz-linear-gradient(0 0, 50px 50px, …);
background: -webkit-gradient(linear, 0 0, 50 50, …);

I really hope the Mozilla syntax is adopted here, it would be a great boon to liquid layout. The Webkit implementation’s lack of relative units is something I see as a flaw. The same discrepancy exists in the Mozilla and Webkit implementations of 2D Transforms.

(3) Repeating Background

This one’s a doozy. By default, Gecko treats gradients just like it would any other background image, and repeats them. This turns radials into spirals and linears into pinstripes. Webkit will not repeat gradients at all:

Webkit (Google Chrome 2.0.172.37)


Gecko (Build 20090801124215)


I generated these images using a modified version of a Webkit test case. You can force Gecko to render gradients in the same way as Webkit by declaring the background as non-repeating:

background: -moz-linear-gradient(…) no-repeat;
background: -webkit-gradient(linear, …);

When you consider that the next version of Firefox, and the current version of Webkit, already have support for multiple backgrounds and background-sizing (-moz-background-size and -webkit-background-size respectively), some amazing designs are becoming possible.

Let’s hope the standards catch up.