By default, color stops are automatically spaced evenly. However, they can be made unevenly spaced if percentages are specified. The following show examples of linear gradients with multiple color stops:
HTML file: | Displayed by browser: |
---|---|
<style>
#grad1 { height: 200px; background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, green, blue); /* Standard syntax */ } #grad2 { height: 200px; background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */ background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */ } #grad3 { height: 200px; background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */ } #grad4 { height: 200px; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */ background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */ } #grad5 { height: 200px; background: -webkit-linear-gradient(left, red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(left, red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90%); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90%); /* For Fx 3.6 to 15 */ background: linear-gradient(to right, red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90%); /* Standard syntax (must be last) */ } </style> <body> <div id="grad1"><h3>Grad1: 3-Color Stops, top to bottom (evenly spaced)</h3></div> <br /> <div id="grad2"><h3>Grad2: 3-Color Stops, top to bottom (not evenly spaced)</h3> <p>red 10%, green 85%, blue 90%</p></div> <br /> <div id="grad3"><h3>Grad3: 7-Color Stops, top to bottom (evenly spaced)</h3></div> <br /> <div id="grad4"><h3>Grad4: 7-Color Stops, left to right (evenly spaced)</h3></div> <br /> <div id="grad5"><h3>Grad5: 7-Color Stops, left to right (not evenly spaced)</h3> <p>red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90%</p></div> </body> |
Grad1: 3-Color Stops, top to bottom (evenly spaced)Grad2: 3-Color Stops, top to bottom (not evenly spaced)red 10%, green 85%, blue 90% Grad3: 7-Color Stops, top to bottom (evenly spaced)Grad4: 7-Color Stops, left to right (evenly spaced)Grad5: 7-Color Stops, left to right (not evenly spaced)red 10%, orange 20%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 90% |
Note: Internet Explorer 9 and earlier versions do not support gradients.