Introduction to gradients

The problem with gradients is that they are a syntactic nightmare. This page gives some more information, as well as workarounds.

I test only two syntaxes: the new, standards-compliant one without prefixes, and the -webkit-prefixed middle syntax. (No other prefixes!)

All desktop browsers meanwhile support the new syntax, but a lot of mobile ones still need the prefixed middle syntax. The bottom line is that you should use both until the WebKit-based browsers support the new syntax. So far only Safari does.

The tests below should work in a browser in order to consider it at all. It uses the combined syntax.

Main test

This is the main gradient test. If a browser fails it, it gets a No and I don’t investigate it any further.

A color stop consists of a color and a stop. The color can be of any syntax. The stop is the point at which the color reaches full saturation. After that the gradient goes on to the next color.
There are no differences between the two syntaxes.

In order to create a repeating syntax, add repeating- to the property name, and make sure the last color stop is a repeat of the first.

Background: old, middle, and new syntax

The problem with gradients is that the spec writers and browser vendors 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, and especially the time it will take to carry the new syntax to all mobile browsers.

These are the three syntaxes:

Old syntax was supported back in 2010 or so. When using unprefixed middle syntax, you occasionally get old results, depending on the browser.

Middle syntax was implemented when the February 2011 draft was published. All browsers used prefixes to distinguish middle syntax from old, and thus all prefixed gradients use middle syntax.

New syntax was implemented when the current spec was published in April 2012. All browsers implemented it prefixless to distinguish new syntax from middle, and thus most unprefixed gradients use new syntax, unless it’s an old old holdout.

Generally, this is the browser implementation:

IE9 and lower do not support gradients at all.

All non-WebKit browsers, as well as Safari on Mac and iOS, support unprefixed new syntax.

The other WebKit-based browsers support -webkit-prefixed middle syntax.