CSS3 gradients allow you to display a smooth transition between two or more specified colors. By using CSS3 gradients, you can reduce download time and bandwidth usage . In addition, elements with gradient effects look better when zoomed in , because the gradient is generated by the browser.
CSS3 defines two types of gradients:
- Linear Gradients-Down/Up/Left/Right/Diagonal
- Radial Gradients-defined by their centers
1. Linear gradient:
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
- direction: the direction of the gradient: set the gradient end
The default is to bottom, the gradient from top to bottom, the end point is bottom,
other values: (to bottom, to top, to right, to left, to bottom right, etc.)
to right: from left
to right to bottom right:
background-image: linear-gradient(to right, red , yellow);A linear gradient starting from the left in the diagonal direction . The starting point is red, and it slowly transitions to yellow:
background-image: linear-gradient(to bottom left, red , yellow);a linear gradient starting from the upper right corner (to the lower left corner). The starting point is red, and it slowly transitions to yellow:
- Color-STOP1: gradient color value
In order to create a linear gradient, at least two color nodes must be defined (multiple colors are possible).
background-image: linear-gradient(red, green);Linear gradient from the top (default). The starting point is red, and it slowly transitions to green:
- gradient use the angle
语法：background-image: linear-gradient(angle, color1, color2);
The image below shows that 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right. The arrow indicates the direction of the gradient.
background-image: linear-gradient(xxxdeg, red, yellow); Examples:
Note: Many browsers (Chrome, Safari, firefox, etc.) use the old standard , that is, 0deg will create a gradient from left to right, and 90deg will create a gradient from bottom to top. Conversion formula 90-x = y where x is the standard angle and y is the non-standard angle. Chrome browser runs: the standard second div box 0deg is a gradient from bottom to top, and the first one is a gradient from left to right.
（-webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀）
- a plurality of nodes Color :
- Gradient supports adding multiple color
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);rainbow gradients
- Transparency (transparent)
CSS3渐变也支持透明度（transparent）,可用于创建减弱变淡的效果。
Use the rgba() function to define the color node, the last parameter in the rgba() function defines the transparency of the color, 0 means completely transparent, 1 means completely opaque.
The four parameters of rgba (0, 0, 0, 1) are red®, green (G), blue (B), and transparency (A). Red, green and blue are integers between 0 and 255, which represent colors. The composition of each color in.
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));Define the background gradient from transparent to red:
-Uneven color gradient (set percentage):
The percentage indicates the standard centerline position of the specified color, and the transition color between the percentages
background-image: linear-gradient(to right,red 10%,green 50%,blue 75%); ;
表示含义：
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
50% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
75% 表示 blue 的颜色中心线在线性渐变方向的 75% 的位置。
10% 到 50% 是 red-green 的过渡色，50%-75% 是 green-blue 的过渡色。
(FIG span percentage left in the white position)
by using a few percentage solid color background is provided:
background-image: linear-gradient(to right,red 10%,green 10%,green 50%,blue 50%,blue 75%,yellow 75%);
-Repeated linear gradient:
Use the repeating-linear-gradient() function to define a repeating linear gradient.
background-image: repeating-linear-gradient(red, yellow 10%, green 50%);Demo
background: repeating-linear-gradient(to right,red 0%, green 20%, blue 30%) ; Specific percentage position:
2. Radial gradient
To create a radial gradient, at least two color nodes must also be defined. At the same time, you can also specify the center, shape (circle or ellipse), and size of the gradient. By default, the center of the gradient is center (representing the center point), the shape of the gradient is ellipse (representing an ellipse), and the size of the gradient is farthest-corner (representing the farthest corner).
Syntax and parameters:
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
The color nodes are evenly distributed (by default)
background-image: radial-gradient(red, green, blue):;
-
position: The position of the starting point of the gradient, which can be a percentage, and the default is the exact center of the graph.
-
shape: the shape of the gradient, ellipse means ellipse, circle means circle. The default is ellipse. If the element shape is a square element, the ellipse and circle display the same.
-
size: The size of the gradient, that is, where the gradient stops. It has four values.
closest-side: the nearest side; farthest-side: the farthest side;
closest-corner: the nearest corner; farthest-corner: the farthest corner,
refer to the rookie tutorial demo code (radial gradient with keywords of different sizes: size at position ):
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
#grad3 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}
#grad4 {
height: 150px;
width: 150px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>
<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>
Repeated radial gradient
The repeating-radial-gradient() function is used to repeat the radial gradient: (same as linear)
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
Like linear gradients, you can also use percentages to achieve uneven color gradients.