Linear Gradients - Multiple Color Stops

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.

Back button Table of Contents Next button