Repeating Gradients

GIF of the CSS repeating gradient used here.

If this is the only red square you see on this page then your browser doen't support CSS3 gradients.



Repeating linear and radial gradients are exactly the same as their non repeating counterparts, except that there is an optional first parameter that is the angle to repeat the gradient. There is an issue though older browsers that only recognize older and not current syntax may use the -moz- or -webkit- prefixes and they interpret this angle differently. Consider the following simple repeating gradient:

repeating-linear-gradient(0deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

This is going to look different in different browsers. Try it in Mozilla, Webkit (Chrome/Safari/Opera current) and Opera (presto).
no prefix-o--moz--webkit-
What you'll see is this:
Mozilla Opera (presto) Opra (webkit)

If you looked at all three browsers at the same time what you'd see is this:

no prefix-o--moz--webkit-

This chart compares the same command with no prefix, and three other browser prefixes in three other browsers and the first thing you notice is Opera prefixed radial-gradient commands, not even Opera.

Then there's the Mozilla and WebKit versions - they interpret the same command rotated by 90 degrees. That is, zero degrees starts in a different place than in the new W3C spec.

All browsers now support the current syntax; Mozilla supports the -moz- prefix and WebKit browsers support the -webkit- prefix. Both Webkit and Mozilla interpret angle differently in their browser prefixed versions of the command. That is, the prefixed and unprefixed versions of the command can be identical other than the prefix and they'll do different things. Subtract the angle from 90 to get the other angle.

So, keep this in mind if you're converting code to or from different browsers and remember if you see some gradient code with angles and they're all the same but with different browser prefixes - then you know it's wrong.