How to Create Linear Gradients in CSS3

Define gradients in CSS3 to add color fades with ease

The most common type of gradient you will see on any given webpage is a linear gradient of two colors. This means that the gradient will move in a straight line changing gradually from the first color to the second along that line.

01
of 03

Creating Cross-Browser Linear Gradients with CSS3

A simple linear gradient from left to right of #999 (dark gray) to #fff (white).
A simple linear gradient from left to right of #999 (dark gray) to #fff (white). J Kyrnin

The image above shows a simple left-to-right gradient of #999 (dark gray) to #fff (white).

Linear gradients are the easiest to define and have the most support in browsers. CSS3 linear gradients are supported in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, and Safari 4+.

When you define a gradient, identify its type—linear or radial—and where the gradient should stop and start. Add, too, the colors of the gradient and where those colors individually begin and end.

To define linear gradients using CSS3, write:

linear-gradient(angle or side or corner, color stop, color stop) 

First you define the type of gradient with the name

Then, you define the start and stop points of the gradient in one of two ways: the angle of the line in degrees from 0 to 359, with 0 degrees pointing straight up. Or with the “side or corner” functions. If you leave these out, the gradient will flow from the top to the bottom of the element.

Then you define the color stops. You define the color stops with the color code and an optional percentage. The percentage tells the browser where on the line to start or end with that color. The default is to place the colors evenly along the line. You will learn more about color stops on page 3.

So, to define the above gradient with CSS3, you write:

linear-gradient(left, #999999 0%, #ffffff 100%); 

And to set it as the background of a DIV write:

div {
background-image: linear-gradient(left, #999999 0%, #ffffff 100%;
}

Browser Extensions for CSS3 Linear Gradients

To get your gradient to work cross-browser, you need to use browser extensions for most browsers and a filter for Internet Explorer 9 and lower (actually 2 filters). All of these take the same elements to define your gradient (except that you can only define 2-color gradients in IE).

Microsoft Filters and Extension—Internet Explorer is the most challenging to support, because you need three different lines to support the different browser versions. To get the above gray to white gradient you would write:

/* IE 5.5–7 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1)";
/* IE 10 */
-ms-linear-gradient(left, #999999 0%, #ffffff 100%);

Mozilla Extension—The -moz- extension works like the CSS3 property, just with the extension. To get the above gradient for Firefox, write:

-moz-linear-gradient(left, #999999 0%, #ffffff 100%); 

Opera Extension—The -o- extension adds gradients to Opera 11.1+. To get the above gradient, write:

-o-linear-gradient(left, #999999 0%, #ffffff 100%); 

Webkit Extension—The -webkit- extension works a lot like the CSS3 property. To define the above gradient for Safari 5.1+ or Chrome 10+ write:

-webkit-linear-gradient(left, #999999 0%, #ffffff 100%); 

There is also an older version of the Webkit extension that works with Chrome 2+ and Safari 4+. In it you define the type of gradient as a value, rather than in the property name. To get the gray to white gradient with this extension, write:

-webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff)); 

Full CSS3 Linear Gradient CSS Code

For full cross-browser support to get the gray-to-white gradient above you should first include a fallback solid color for browsers that don't support gradients, and the last item should be the CSS3 style for browsers that are fully compliant. So, you write:

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

Creating Diagonal Gradients—The Angle of the Gradient

A gradient at a 45 degree angle
A gradient at a 45 degree angle. J Kyrnin

The start and stop points determine the angle of the gradient. Most linear gradients are from top to bottom or left to right. But it is possible to build a gradient that moves on a diagonal line. The image on this page shows a simple gradient that moves in a 45-degree angle across the image from right to left.

Angles to Define the Gradient Line

The angle is a line on an imaginary circle in the center of the element. A measure of 0deg points up, 90deg points right, 180deg points down, and 270deg points left. Use any angle measure.

In a square, a 45-degree angle moves from the top left corner to the bottom right, but in a rectangle the start and end points are slightly outside the shape.

The more common way to define a diagonal gradient is to define a corner, such as top right and the gradient moves from that corner to the opposite corner. Define the starting position with the following keywords:

  • top
  • right
  • bottom
  • left
  • center

And they can be combined to be more specific, such as:

  • top right
  • top left
  • top center
  • bottom right
  • bottom left
  • bottom center
  • right center
  • left center

Here is the CSS for a gradient similar to the one pictured, red to white moving from the top right corner to the bottom left:

background: ##901A1C;
background-image: -moz-linear-gradient(right top,#901A1C 0%,#FFFFFF 100%);
background-image: -webkit-gradient(linear,right top, left bottom,color-stop(0, #901A1C),color-stop(1, #FFFFFF));
background: -webkit-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: -o-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient(right top, #901A1C 0%, #ffffff 100%);
background: linear-gradient(right top, #901A1C 0%, #ffffff 100%);

You may have noticed that there are no IE filters in this example. That is because IE only allows two types of filters: top to bottom (the default) and left to right (with the GradientType=1 switch).

03
of 03

Color Stops

A gradient with three color stops
A gradient with three color stops. J Kyrnin

With CSS3 linear gradients, add several colors to your gradient to create even fancier effects. To add these colors, insert 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 three-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.