1. Technology

CSS3 Linear Gradients

By

3 of 4

Color Stops
A gradient with three color stops

A gradient with three color stops

J Kyrnin

With CSS3 linear gradients, you can add multiple colors to your gradient to create even fancier effects. To add these colors, you add additional colors on to the end of your property, separated by commas. You should include where on the line the colors should start or end as well.

Internet Explorer filters only support two color stops, so when you build this gradient, you should only include the first and second colors you want to display.

Here is the CSS for the above 3-color gradient:

background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #901A1C 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(51%,#901A1C), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
background: -o-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
background: linear-gradient(left, #ffffff 0%,#901A1C 51%,#ffffff 100%);

See this linear gradient with three color stops in action using just CSS.

©2014 About.com. All rights reserved.