By Louis Simoneau

WebKit Updates CSS3 Gradient Support, Matches Mozilla Syntax

By Louis Simoneau

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?

note:Want more?

If you want to read more from Louis, subscribe to our weekly tech geek newsletter, Tech Times.

  • In the spirit of progressive enhancement, first promulgated (for me anyway) by Andy Clarke a few years back. I already use CSS3 declarations wherever I can see a benefit to their use in those browsers that support it.

    Those that can’t will still see the all right content, styled even, it just won’t look quite as flash as it would in recent Firefox, Opera or Chrome browsers and I mean things like CSS rounded corners, shadows, gradients and some CSS3 selectors.

    Mind you, apparently Andy was monochroming his clients’ sites in IE6 as long ago as 2007, and delivering “advanced” styles to all other UAs *and* writing this into contracts. Some sort of IE-use punishment perhaps?

    • W2ttsy

      I wouldn’t call that punishment. Broken colour pallets (as a result of mismatched css support) would make content harder to read/view than a grey scale result.

      Plus i guess it sort of reminds people to update (where possible) to the latest IE… (I’ve been building “This page may not function as expected” alerts into the top of my pages and serving them to IE6 for a while now)

  • Good news. Although we’ll still have to use the old webkit syntax for quite a while, while older versions of webkit browsers are out there. I must admit that I’ve not used CSS gradients because of the lack of support on certain browsers and the fact that I find it relatively rare to use a gradient in a design that is only optional. Hopefully, this is a step forward.

  • hoopz

    The later examples seem incorrect. You’re using “property: foo: bar” instead of “property: foo(bar)”.

    So I guess your tag-line is a lie?

    • Louis Simoneau

      No lie, I just screwed up the code. Fixed now.

  • $hekh@r

    Demonstrating codes above uses”background-image” property. Can’t we use just “background” instead of that?

    • Background is the shorthand.
      In some cases, beside your background-image gradient you might want to use also a background-color.
      And here’s what they say:
      “Don’t forget that gradients are a type of generated image, not a property. This means that you can use them anywhere you’d use a url(image.png).”
      Hope now things are more clearly for you!

  • config

    Finally, an accord with these varying vendor-specific properties. Personally, for consistency I’d have preferred “gradient-linear” and “gradient-radial” (not to mention, happy times with code completion), but damn! At last, there be progress!

  • Dave

    Great, thanks for sharing.

Get the latest in JavaScript, once a week, for free.