I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

CSS gradients

In the past month I’ve researched CSS gradients, and I can finally present my findings. As usual, there was no source that gives clear, concise, accurate information about the three syntaxes and the four rendering engines, so I decided to write it myself.

Here is the inevitable compatibility table. Below I excerpt part of my introduction to gradients.

The problem with gradients is that they are a syntactic nightmare. The gradient spec writers and browser makers changed their mind not once but twice. Thus we have three sets of syntax, and all three occasionally crop up even today. I call these old, middle, and new syntax.

Fortunately, you can ignore the old syntax altogether. Trident, Gecko, and Presto support new syntax, so they’re not the problem, either. The problem is WebKit.

In 2013 you will need the prefixed middle syntax for the WebKit-based browsers, since WebKit hasn’t implemented the new syntax yet. Work is being done, and I expect the first WebKit-based browser with the new syntax somewhere in Q1 2013, but it will take a lot more time before all mobile browsers have gone over. Therefore it’s best to wait until 2014 before dropping the middle syntax altogether.

The combined syntax for linear-gradients is:

-webkit-linear-gradient(<direction>,<color-stop>[,<color-stop>]) // MIDDLE
linear-gradient(to <direction>,<color-stop>[,<color-stop>]) // NEW

Instead of (to) <direction> you can also use <angle>. Note that angles and directions work differently in middle and new syntax.

The combined syntax for radial-gradients is:

-webkit-radial-gradient(<position>,<shape> <size>,<color-stop>[,<color-stop>]) // MIDDLE
radial-gradient(<shape> <size> at <position>,<color-stop>[,<color-stop>]) // NEW

In general, <position>, <shape>, and <size> did not change from middle to new syntax, although their order of definition did (see above). Also, swapping <shape> and <size> is allowed in both syntaxes. However, there are a few caveats.

• Using one length value for <size> (such as 3px) is allowed in new syntax, but middle syntax requires two values.
• Using a single percentage value is not allowed even in new syntax.
• Combining an explicit <shape> with a length value for <size> (e.g. circle 25px 25px) is allowed in new syntax, but not in middle syntax.