1. Technology

CSS3 Linear Gradients

By

1 of 4

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

Linear Gradients

The most common type of gradient you will see 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. The image on this page 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+. Internet Explorer can add gradients using a filter and supports them back to IE 5.5. This isn't CSS3, but it is an option for cross-browser compatibility.

When you define a gradient you need to define several different things:

  • What type of gradient it is—linear or radial
  • Where the gradient should start
  • Where the gradient should stop
  • What colors are in the gradient and where they should start and stop

To define linear gradients using CSS3, you write:

linear-gradient(angle or side or corner, color stop, color stop)
  • First you define the type of gradient with the name linear-gradient.
  • 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” function, such as left, right, bottom, and top. These will be explained in more detail on the next page. 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 you 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 -moz- 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+ you 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%);

The next pages in this tutorial explain the parts of a gradient in more detail, and the last page points you to a tool that is an excellent way to create CSS3 gradients automatically.

See this linear gradient in action using just CSS.

©2014 About.com. All rights reserved.