CSS linear-gradient() Function
Example
This linear gradient starts at the top. It starts red, transitioning to yellow, then to blue:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS linear-gradient() function sets a linear gradient as the background image.
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Example of Linear Gradient:
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Function | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Syntax
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
| Value | Description |
|---|---|
| direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
| color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
More Examples
Example
A linear gradient that starts from the left. It starts red, transitioning to blue:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Try it Yourself »
Example
A linear gradient that starts at top left (and goes to bottom right):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Try it Yourself »
Example
A linear gradient with a specified angle:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Try it Yourself »
Example
A linear gradient with multiple color stops:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Try it Yourself »
Example
A linear gradient with transparency:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Gradients
