CSS linear-gradient() Function
Example
The following example demonstrates a linear gradient starting from the top, beginning with red, transitioning to yellow, and then to blue:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Definition and Usage
The linear-gradient() function is used to create an image consisting of a linear gradient of two or more colors.
To create a linear gradient, you must specify at least two color stops. You can also set the direction of the gradient (specified as an angle) or use the default top-to-bottom gradient if no direction is specified.
/* From top to bottom, blue to red */
linear-gradient(blue, red);
/* Gradient axis at 45 degrees, blue to red */
linear-gradient(45deg, blue, red);
/* From bottom right to top left, blue to red */
linear-gradient(to left top, blue, red);
/* From bottom to top, starting with blue, transitioning to green at 40% height, ending with red */
linear-gradient(0deg, blue, green 40%, red);
Linear Gradient Example
Supported Version: CSS3
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
Numbers prefixed with "webkit", "moz", or "o" indicate the first version that supported the function with a prefix.
| Function | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| linear-gradient() | 26.0 <br>10.0 -webkit- | 10.0 | 16.0 <br>3.6 -moz- | 6.1 <br>5.1 -webkit- | 12.1 <br>11.1 -o- |
CSS Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
| Value | Description |
|---|---|
| direction | Specifies the direction or angle of the gradient. |
| color-stop1, color-stop2,... | Specifies the starting and ending colors of the gradient. |
More Examples
Example
The following example demonstrates a linear gradient starting from the left, beginning with red and transitioning to yellow:
#grad {
background-image: linear-gradient(to right, red, yellow);
}
Example
The following example demonstrates a linear gradient from the top left to the bottom right:
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Example
The following example demonstrates a linear gradient with a specified angle:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Example
The following example demonstrates multiple stop colors:
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
Example
The following example uses transparency:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
CSS Tutorial: CSS3 Gradients