English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS repeating-linear-gradient() creates an <image> composed of repeating linear gradients, similar to the linear-The gradient() function, using the same parameters, but it will repeat the gradient in all directions to cover the entire container. The result of this function is an object of the <gradient> data type, which is a special <image> type.
Repeating linear gradient:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Displayed when the browser does not support it */
background-image: repeating-linear-gradient(red, green 10, green 20%);
}
#grad2 {
height: 200px;
background-color: red; /* Displayed when the browser does not support it */
background-image: repeating-linear-gradient(45deg,red,yellow 7,green 10%);
}
#grad3 {
height: 200px;
background-color: red; /* Displayed when the browser does not support it */
background-image: repeating-linear-gradient(190deg,red,yellow 7,green 10%);
}
#grad4 {
height: 200px;
background-color: red; /* Displayed when the browser does not support it */
background-image: repeating-linear-gradient(90deg,red,yellow 7,green 10%);
}
</style>
</head>
<body>
<h1>Repeating linear gradient</h1>
<div id="grad1></div>
<p>45deg:</p>
<div id="grad2></div>
<p>190deg:</p>
<div id="grad3></div>
<p>90deg:</p>
<div id="grad4></div>
<p><strong>Attention:</strong> Internet Explorer 9 IE browsers prior to and including the specified version do not support linear gradients.</p>
</body>
</html>Test and see ‹/›repeating-linear-The gradient() function is used to create a repeating linear gradient "image".
Supported Version: CSS3
The numbers in the table represent the first browser version number that supports the function.
"webkit" or "moz" or "o" specifies the prefix of the first version number that supports the function.
| function | |||||
|---|---|---|---|---|---|
| repeating-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: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Value | Description |
|---|---|
| angle | Define the angle direction of the gradient. From 0deg to 360deg, default is 180deg. |
| side-or-corner | Specify the starting position of the linear gradient. It consists of two keywords: the first specifies the horizontal position (left or right), and the second specifies the vertical position (top or bottom). The order is arbitrary, and each keyword is optional. |
| color-stop1, color-stop2,... | Specify the start and end colors of the gradient, composed of color values and stop positions (optional, specified using percentages). |
Different repeated linear gradients:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: repeating-linear-gradient(45deg,red,blue 7,green 10%);
}
#grad2 {
height: 200px;
background-image: repeating-linear-gradient(190deg,red,blue 7,green 10%);
}
#grad3 {
height: 200px;
background-image: repeating-linear-gradient(90deg,red,blue 7,green 10%);
}
</style>
</head>
<body>
<h3>Repeated linear gradient</h3>
<p>45 degree linear gradient, from red to blue:</p>
<div id="grad1></div>
<p>190 degree linear gradient, from red to blue:</p>
<div id="grad2></div>
<p>90 degree linear gradient, from red to blue:</p>
<div id="grad3></div>
<p><strong>Attention:</strong> Internet Explorer 9 and earlier versions of IE browsers do not support gradients.</p>
</body>
</html>Test and see ‹/›CSS Tutorial: CSS3 Gradient