linear-gradient()

background: linear-gradient(#FFFFFF, #C9C9C9);
background: -webkit-linear-gradient(#FFFFFF, #C9C9C9);
background: -mozlinear-gradient(#FFFFFF, #C9C9C9);
background: -ms-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

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

※ Version data is based on MDN / Can I Use.

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;