WebKit Updates CSS3 Gradient Support, Matches Mozilla Syntax

On Friday, the WebKit team announced they were updating the CSS3 gradient support in the rendering engine, bringing it in line with Mozilla’s implementation. Nightly WebKit builds now include support for -webkit-linear-gradient and -webkit-radial-gradient in addition to the old -webkit-gradient value. These new values use the same syntax as -moz-linear-gradient and -moz-radial-gradient, so developers can now use the same set of values and simply copy them across, rather than writing to two syntaxes, as was previously required. Most developers in the past had fallen back on using gradient code generators, as the old WebKit syntax was tricky to remember. With this new simpler and consistent syntax, it will become quite a lot easier to use gradients in working sites.

The syntax has also been included in the latest Editor’s Draft of the CSS3 Image Values and Replaced Content Module.

Fortunately for developers who’d already started using the old -webkit-gradient, existing sites won’t break. That’s because the new properties are named differently, and the existing implementation of -webkit-gradient won’t be removed.

As a demonstration of the new support, the announcement blog post includes a number of example gradients. Have a look at the source, and you’ll see that the values are the same in both the -moz-linear-gradient and -webkit-linear-gradient values. The same goes for radial gradients, and for the repeated versions of linear and radial gradients.

For those unfamiliar with the syntax, let’s have a quick primer. Specifying a simple linear gradient is straightforward:

background-image: -webkit-linear-gradient(black, white);
background-image: -moz-linear-gradient(black, white);

If you want your gradient to be along a different axis, you can either specify the point of origin using keywords like left, right, top, bottom, bottom left, bottom right, and so on, or specify a value in degrees for the direction the gradient will run. The angle value goes before the list of color stops, and degrees are counted clockwise from the right. So, for a gradient starting from the top right corner of the box and ending in the lower left, you could write either of the following:

background-image: -webkit-linear-gradient(top right, black, white);

background-image: -webkit-linear-gradient(135deg, black, white);

You can also define stops to adjust where each color starts, and you can specify as many different colors as you’d like.

The syntax for radial gradients is very similar:

background-image: -webkit-radial-gradient(black, white);

If you want to position the center of the gradient, just specify X and Y values the same was as you would for background-position:

backround-image: -webkit-radial-gradient(10px 10px, black, white);

You can also adjust the shape and size of the radial gradient, have a look at the spec or the announcement for more details.

Consistent implementation and a draft specification are big steps in the progression of CSS3 gradients towards being something we can use in everyday projects. If you’ve shied away from them in the past because of their complexity, will this update to WebKit make you reconsider using them?