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