The background: linear-gradient function actually creates an image for the background of an element that represents a linear gradient a two or more colors. The linear-gradient function is relatively new to CSS and is not supported by all browsers.

The linear-gradient will take the colors specified and fill the box of the element with a mathematically calculated range of colors between the colors specified. An angle can also be applied to the gradient.

The syntax for this value is as shown:

background: linear-gradient(<angle>, color, color, color... )

It must be used with the background or background-image property. The angle can be expressed as 0deg, 45deg, 60deg, etc. The angle can be positive or negative. The colors are separated by commas. The first stated color will start at the bottom, then the colors will be stacked in the order stated.

Other values rather than a numerical deg can be used starting with which side of the box, then which other side of the box. Examples would be to right, to bottom, etc.

Note that when using an angle other than 0deg or 90deg, the full saturation for the first and last color will be outside the box of the element.


div.bluered {
    background: linear-gradient(0deg, blue, red);

Blue to red at 0deg


div.greys {
    background: linear-gradient(45deg, #000000, #CCCCCC)

#000000 to #CCCCCC at 45deg


div.rainbow {
    background: linear-gradient(-30deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF)

#FF0000, #FF8800; #0000FF at -30deg