all

angle

direction

repeat

reps

simple

stops

transparency

CSS3 Linear Gradients
Browser Compatibility Matrix

All Tests

	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...

Simple Gradient
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(#000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-linear-gradient(#000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-linear-gradient(#000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-linear-gradient(#000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-linear-gradient(#000000, #ffffff);

Gradient with direction specified
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to top, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-linear-gradient(bottom, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-linear-gradient(bottom, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-linear-gradient(to top, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-linear-gradient(bottom, #000000, #ffffff);

No prefix, gradient with all four directions specified.
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to top, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to bottom, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to left, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to right, #000000, #ffffff);

Comparison of No Prefix and Webkit/Mozilla direction notation
	to top	to bottom	to left	to right
No Prefix	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...
WebKit/Moz	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...

	top	bottom	left	right
no prefix	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...
WebKit/Moz	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...	ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...

Gradient with angle specified
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(to top right, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-linear-gradient(bottom left, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-linear-gradient(bottom left, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-linear-gradient(to top right, #000000, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-linear-gradient(bottom left, #000000, #ffffff);

Gradient with transparency specified
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(127, 127, 255, 0.5));

Gradient with color stops
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		linear-gradient(#000000, #ddddff 20%, #ddffff 70%, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-linear-gradient(#000000, #ddddff 20%, #ddffff 70%, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-linear-gradient(#000000, #ddddff 20%, #ddffff 70%, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-linear-gradient(#000000, #ddddff 20%, #ddffff 70%, #ffffff);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-linear-gradient(#000000, #ddddff 20%, #ddffff 70%, #ffffff);

Repeating Gradient
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		repeating-linear-gradient(red, green 18%, blue 25%);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-o-repeating-linear-gradient(red, green 18%, blue 25%);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-ms-repeating-linear-gradient(red, green 18%, blue 25%);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-moz-repeating-linear-gradient(red, green 18%, blue 25%);
ABCabc... ABCabc... ABCabc... ABCabc... ABCabc...		-webkit-repeating-linear-gradient(red, green 18%, blue 25%);

Repeating Gradient
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);

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);

Gradient Angles - This only works in 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);

Gradient Angles - This only works in 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);

This only works in Webkit and Firefox. Gradient Angles - 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