CSS3 Linear Gradients
Browser Compatability Matrix
Summary
| Simple Gradient | Specify Direction | Specify Angle | Transparency | Stops | Repeat | Repeat 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)