all

angle

direction

repeat

reps

simple

stops

transparency

CSS3 Linear Gradients
Browser Compatibility Matrix

Repeating Gradient with Angle Specified

	Simple Gradient	Specify Direction	Specify Angle	Trasparency	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...

Repeating Gradient with angle specified
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

Varying gradient angles, no prefix. This has to work in all browsers. If you see text and no red/black background, your browser doesn't support gradients.
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(0deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(10deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(30deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(60deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(90deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(180deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(2700deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

Varying gradient angles, WebKit. (Safari, Chrome...)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(0deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(10deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(30deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(60deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(90deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(180deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(270deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

Varying gradient angles, Firefox.
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(0deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(80deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(30deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(60deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(70deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(90deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(180deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(270deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

Varying gradient angles, FireFox/WebKit. Subtract no-prefix angle from 90 to get Mozilla/Webkit degrees.
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(90deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 0 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(80deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 10 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(60deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 30 degreees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(30deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 60 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 70 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(0deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 90 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(-90deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 180 degrees)
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(-180deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);(Spec 270 degrees)

Comparison of No-Prefix angles to WebKit/Mozilla
No Prefix Angle			Webkit / Mozilla: 90 degrees minus No Prefix Angle
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		0 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		90 - 0 = 90 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		10 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		80 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		30 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		60 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		60 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		30 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		70 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		20 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		90 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		0 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		180 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-90 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		270 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-180 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		100 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-10 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		190 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-100 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		280 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-190 degrees
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		350 degrees	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-10 degrees