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