CSS linear-gradient

The CSS linear-gradient() function creates an which represents a linear gradient of colors.


Like any other gradient, a CSS linear gradient is not a CSS but an image

Syntax

linear-gradient( [ [  | to  ,]?  [, ]+ )

An angle of direction for the gradient.

Represents the position of the starting-point of the gradient line. It 
consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom.

The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively.

This value is comprised of a color value, followed by an optional stop position (either a percentage between 0% and 100% or a length along the gradient axis).

Browser compatibility

Firefox (Gecko)  : -moz-linear-gradient

Chrome           : -webkit-linear-gradient

Internet Explorer: -ms-linear-gradient

Opera            : -o-linear-gradient

Safari           : -webkit-linear-gradient