linear-gradient()

Specifies a linear gradient for the background. Use it as the value of the 'background' property.

Older browser versions may require vendor prefixes ('webkit', 'moz', 'ms', etc.) for gradients to work, so it is safer to include them.

For a radial gradient, use 'radial-gradient' instead of 'linear-gradient'. To apply gradients in IE9 and earlier, use 'filter'.

Sample Code

style.css

/* top to bottom (default direction) */
background: linear-gradient(white, #C9C9C9);

/* left to right */
background: linear-gradient(to right, white, #C9C9C9);

/* diagonal (top-left to bottom-right) */
background: linear-gradient(to bottom right, #3498db, #8e44ad);

/* angle-based (45 degrees) */
background: linear-gradient(45deg, #e74c3c, #f39c12);

/* three-color gradient */
background: linear-gradient(to right, #3498db, #27ae60, #f39c12);

/* specify color stop positions */
background: linear-gradient(to right, #e74c3c 30%, #f39c12 70%);

/* striped pattern (sharp color boundary) */
background: linear-gradient(to right, #3498db 50%, #2ecc71 50%);

/* semi-transparent overlay for hero banners */
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8));

/* older browser support */
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: linear-gradient(#FFFFFF, #C9C9C9);

Refer to the table below for which browser versions require vendor prefixes.

Browser	Versions requiring a vendor prefix
Chrome	Chrome 25 and earlier
Safari	Safari 6 and earlier
Firefox	Firefox 16 and earlier
Android	Android 5.0 and earlier
iOS	iOS 6.1 and earlier

Browser Display Result

background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-linear-gradient(#FFFFFF, #C9C9C9);
height: 150px;

Details

Specifies a linear gradient for the background. The syntax is:
'linear-gradient(start-position angle, start-color, mid-color, end-color)'.
The start position, angle, and mid-color are all optional. When omitted, the default start position is 'top', the angle is '0deg', and no mid-color is set.

The example above shows a top-to-bottom gradient, but you can also specify a horizontal or diagonal gradient using the start position.

Without vendor prefixes, the start position must be specified from the opposite direction using 'to', e.g., 'to right'.

background: -moz-linear-gradient(left, #ffffff, #C9C9C9);
background: -webkit-linear-gradient(left, #ffffff, #C9C9C9);
background: -ms-linear-gradient(left, #ffffff, #C9C9C9);
background: linear-gradient(to right, #ffffff, #C9C9C9); /* Without vendor prefix, specify 'to right' to draw from left to right. */
height: 150px;

For a diagonal gradient, specify the angle in degrees ('deg'). The angle rotates counterclockwise with vendor prefixes.

Note: without vendor prefixes, the rotation direction is clockwise, not counterclockwise. For example, to get the same angle as '45deg' with vendor prefixes, you need to specify '135deg' without them.

background: -moz-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: -webkit-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: -ms-linear-gradient(45deg, #ffffff 0%, #C9C9C9 100%);
background: linear-gradient(135deg, #ffffff 0%, #C9C9C9 100%);
height: 150px;

You can create multi-color gradients by adding mid-colors, separated by commas. Optionally specify each color's position after the color value separated by a space.

background: -moz-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: -webkit-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: -ms-linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
background: linear-gradient(#ff0000 0%, #ffff00 40%, #ffff00 60%, #0000ff 100%);
height:　150px;

Color positions can also be specified in 'px' units, and colors can be specified using 'rgb()'. You can mix 'rgb()' and hex color codes in the same declaration.

background: -moz-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: -webkit-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: -ms-linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
background: linear-gradient(rgb(255,0,0) 0px, #ffff00 60px, #ffff00 90px, rgb(0,0,255) 150px);
height: 150px;

You can also overlay a gradient on top of a background image.

background: -moz-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: -webkit-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: -ms-linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
background: linear-gradient(rgba(246, 255, 0, 0.6), rgba(255, 0, 161, 0.6)), url(dictionary-css/img/sample.jpg);
width: 300px;
height: 200px;