CSS3 Linear Gradients
Browser Compatability Matrix

Summary

Simple GradientSpecify DirectionSpecify
Angle
TransparencyStopsRepeatRepeat Angle
No Prefix
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-o
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-ms
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-moz
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
-webkit
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...
ABCabc...


There's a problem with gradients. The good news is they're here (never mind they should have been in 1999; PostScript and Quark had by that time got people used to them for over a decade) but the bad news is the syntax is the most bizarre machinated mess I've ever seen.

This stems from the fact what both the Apple Webkit group and the Mozilla group had different ideas about how to do this and the syntax they used is different from each other and from what eventually became the spec, which is what Opera implemented (along with many, but not all of the WebKit commands.

So in practical terms if you're writing stuff with gradients today, use un-prefixed forms of the commands. If however your code has to run in old browsers or you're trying to make sense of old code, this might help. Thee are examples of all the major functional characteristics of both linear and radial gradients for all the major browser prefixes.

The major problems are the syntax if different in old forms of these commands and the angles and directions are different. Also, syntax that used to work in old commands in similar to new ones, but if you try it with a new one the whole thing breaks. Example "top" used to work in Mozilla and WebKit stuff, but now you need to say "to bottom" for it to work, with the former syntax, that part of the code will stop working. Note the direction of the gradient changed from early WebKit to current and the angle stuff for linear gradients is 90 degrees off too. These are explained in depth in their respective sections.

Good luck! (you'll need it)

All

All tests

All tests on a single page.

angle

Gradient with an explicit angle

Default white to black transition varying the angle of the gradient. This gets complicated.

In a nutshell the default direction for directions such as "left" and "right" and "top" and "bottom" in the spec are the opposite of what they are in WebKit/Mozilla.

Summary:
Old syntax: "X" where X is a direction, would cause a gradient in the direction of Y.
New syntax: "to X" where X is the old direction will draw a gradient in the direction opposite from Y.

There's probably a good reason for this, but I don't care. If I ever get the ability to go back in time I'm gonna sort this person out. If you can't figure out who made this rediculous "feature", then I already did.


direction

Gradient with explicit direction

Default white to black transition varying the direction of the gradient left to right and top to bottom.

Be aware the spec uses "to top", "to bottom", "to left", "to right", but old versions of WebKit and Mozilla instead use ", but old versions of WebKit and Mozilla instead use top", "bottom", "left", "right".

So, if you're trying to convert an old Mozilla or WebKit gradient demo and you see "-moz-linear-gradient (top..." or "-webkit-gradient (top..." then you would replace top with to bottom an you'd change the others appropriately as well.

That is:

OLDNEW
top -to bottom
bottom -to top
left - to right
right - to left

repeat

Repeating gradients

Repeating color pattern.

reps

Repeating gradients with angle specitfied

Repeating pattern varying the angle.

The angle specification used by Mozilla and WebKit is 90 degrees out of phase with the spec, so you have to subtract the angle you want from 90 and give that to WebKit/Mozilla.


simple

Simple gradient

Default white to black transition.

stops

Gradient with stops

More than one color transition.

transparency

Gradient with transparency

Alpha channel transparency.

Tags: #all #angle #direction #repeat #repeat_angle #simple #stops #transparency