linear-gradient
The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.
Linear gradients are defined by an axis, the gradient line, with each point on it being of a different colors. Perpendicular lines to the gradient-line have one single color, the one of the point on the gradient line.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* fallback color if gradients are not supported */
background-color: #F07575;
/* For Chrome and Safari */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%),
#bada55);
/* For old Fx (3.6 to 15) */
background-image:-moz-linear-gradient(top,
hsl(0, 80%, 70%), #bada55);
/* For pre-releases of IE 10*/
background-image:-ms-linear-gradient(top,
hsl(0, 80%, 70%), #bada55);
/* For old Opera (11.1 to 12.0) */
background-image:-o-linear-gradient(top,
hsl(0, 80%, 70%), #bada55);
/* Standard syntax; must be last */
background-image:linear-gradient(to bottom,
hsl(0, 80%, 70%), #bada55);
width:
500px;
height:
500px;
}
</style>
</head>
<body>
</body>
</html>
