English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS linear-The gradient() function creates an image representing the linear gradient of colors. The result is a CSS object of type <gradient>, which is a special form of <image>.
The following examples demonstrate the linear gradient starting from the top, from red to yellow, then to blue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>Linear Gradient - From top to bottom</h3>
<p>Linear gradient starting from the top, from red to yellow, then to blue:</p>
<div id="grad1></div>
<p><strong>Notice:</strong> Internet Explorer 9 and earlier versions of IE browsers do not support gradients.</p>
</body>
</html>Test and See ‹/›linear-The gradient() function is used to create a "image" of a linear gradient.
To create a linear gradient, you need to set a starting point and a gradient effect with a direction (specified as an angle). You also need to define the ending color. The ending color is the color to which Gecko should smoothly transition, and you must specify at least two, although you can also specify more colors to create more complex gradient effects.
Supported versions: CSS3
The numbers in the table represent the first browser version number supporting the function.
"webkit" or "moz" or "o" specifies the prefix for the first version number of the function supported.
| 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- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
| Value | Description |
|---|---|
| direction | Specify the direction (or angle) of the gradient using an angle value. |
| color-stop1, color-stop2,... | Used to specify the starting and ending colors of the gradient. |
The following examples demonstrate the linear gradient starting from the left, from red to yellow:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Displayed when linear gradients are not supported */
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<h3>Linear Gradient - From left to right</h3>
<p>Linear gradient starting from the left. The starting color is red, gradually transitioning to yellow:</p>
<div id="grad1></div>
<p><strong>Notice:</strong> Internet Explorer 8 and earlier versions do not support gradients.</p>
</body>
</html>Test and See ‹/›The following examples demonstrate the linear gradient from the top left to the bottom right:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Displayed when linear gradients are not supported */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>Linear gradient starting from the top left (to the bottom right). The starting color is red, gradually transitioning to yellow:</p>
<div id="grad1></div>
<p><strong>Notice:</strong> Internet Explorer 8 and earlier versions do not support gradients.</p>
</body>
</html>Test and See ‹/›The following examples demonstrate the linear gradient specifying an angle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* Browser does not support, display */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* Browser does not support, display */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* Browser does not support, display */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* Browser does not support, display */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>Linear Gradient - Using different angles</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>Notice:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>Test and See ‹/›The following example demonstrates multiple stopping colors:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 55px;
background-color: red; /* Browser does not support, display */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard Syntax (must be placed at the end) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
<p><strong>Notice:</strong> Internet Explorer 8 and earlier versions do not support gradients.</p>
</body>
</html>Test and See ‹/›The following example uses transparency:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define color nodes. The last parameter of the rgba() function can be from 0 to 1 value, which defines the color opacity: 0 represents complete transparency,1 represents complete opacity.</p>
<div id="grad1></div>
<p><strong>Notice:</strong> Internet Explorer 8 and earlier versions do not support gradients.</p>
</body>
</html>Test and See ‹/›CSS Tutorial: CSS3 Gradient