The linear-gradient function creates a color gradient.
This function is used by the background and background-image properties.
A linear-gradient function running from top to bottom.
<style>
.linear {
height: 150px;
background-image: linear-gradient(orangered, purple);
}
</style>
<div class="linear"></div>
Two or more color stops must be specified to create a linear gradient.
Optionally, the gradient's direction can also be specified.
linear-gradient(direction,
color-stop-1, color-stop-2, ..., color-stop-n);
| Value | Description |
|---|---|
direction |
Optional. Specifies the starting point and direction of the linear gradient. Default is top-to-bottom. Valid values include: to right, to top, to left, and to bottom.
These are equivalent to 90deg, 180deg, 270deg, and 0deg.
Custom directions can be specified as 20deg, 165deg, etc.
|
color-stop-1, |
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage. |
A linear-gradient with three color stops from left to right.
<style>
.linear-right {
background-image: linear-gradient(to right,
orangered 10%, yellow 70%, purple 80%);
height: 150px;
}
</style>
<div class="linear-right"></div>
A linear-gradient with two color stops and a specified direction.
<style>
.linear-deg {
background-image: linear-gradient(150deg, orangered, yellow);
height: 150px;
}
</style>
<div class="linear-deg"></div>
This table shows when linear-gradient support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
6.1 | Jun 2013 |
