Linear Gradient

Description

Specifying the line angle for the gradient can be done via keywords or degrees. To use a keyword for the angle, prefix it with "to" eg "to top right".
Keywords map to degrees with 0deg equal to top then in a clockwise direction right equals 90deg.

YouCan specify one or more color values.
Stops specify that you want a specific color at the position supplied as the stop.

Be aware that the parameters have gone through some changes and you may find example using old code, and older browers not supporting the newer parameters.

See also:

Radial Gradients

Live Example

Play with the code in the textarea below.

<!doctype html>
<html>
<head>
<style type="text/css">
div{
   width:100px; 
   height:100px; 
  border:solid #000 1px;
  margin:.5em;
  float:left;
}
#tobottom{
   background-image: -webkit-linear-gradient( yellow, black);
   background-image: -moz-linear-gradient( yellow, black);
   background-image: -o-linear-gradient( yellow, black);
   background-image: linear-gradient( yellow, black);
}

#angled{
  background-image: -webkit-linear-gradient(145deg, #00FF16, black);
  background-image: -moz-linear-gradient(145deg, #00FF16, black);
  background-image: -o-linear-gradient(145deg, #00FF16, black);
  background-image: linear-gradient(145deg, #00FF16, black);
}
#multi{
   background-image: -webkit-linear-gradient(red, yellow, black);
   background-image: -moz-linear-gradient(red, yellow, black);
   background-image: -o-linear-gradient(red, yellow, black);
   background-image: linear-gradient(red, yellow, black);
}
</style>
</head>
<body>
<div id="tobottom"> </div>
<div id="angled"> </div>
<div id="multi"> </div>
</body>
</html>

Values

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

Introduced in CSS version

Inherited

N/A

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions	10	-moz-	-webkit-	-o-	-webkit-

Belongs to:

Image Values and Replaced Content

See the full list CSS properties and browser support: CSS Properties

User login

Navigation