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.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?