Previously, we want to achieve this gradual change, it may take Photoshop or Fireworks graphics to create a gradient and use background-image property gradient graphic in the background element.
Now, CSS support gradient background, the image can be understood instantly created for the Web browser. Therefore, the gradient also using conventional background-image property to create
Linear gradient
background-image: linear-gradient (angle, color);
Linear gradient is the most basic type of gradient. This gradual transition from one color to another color in a straight line.
This is specified by the angle of direction of a line, or add a keyword followed top to, bottom, right, left in a certain key or keys, for example to bottom left.
As an example of FIG
CSS code:
body {
background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
}
If the gradient from purple to green element on top of the over-below, to use keywords to bottom.
CSS code:
html, body {
width: 100%;
height: 100%; } body { background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF); }
In addition, you can use this to bottom right keywords specified angle of the gradient. The gradient from the top left corner of the element start, end elements to the bottom right corner.
CSS code:
html, body {
width: 100%;
height: 100%; } body { background-image: linear-gradient(to bottom right, #7A88FF, #7AFFAF); }
The color transition can be used with any of the color values in CSS, reference [CSS] colored transparent
Gradient direction is not limited to only the use of keywords, you can also specify the direction of the gradient using the angle value.
Writing angle values:
plus deg after the number between 0 to 360, in which the end of the specified transition direction.
For example, 0deg a top edge of the element, so that the transition from the bottom edge of the start end of the top edge.
In other words,
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
it is equivalent to:
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
Value of the angle of clockwise rotation, and therefore, the right side represents 90deg element (same to the right), 180deg represents base element (same to bottom), 270deg element represents the left (same to left).
When using the angle value, the browser will draw a imaginary line through the center of the element. This angle is the angle of the line, but also indicate that the specified excessive where it ends.
CSS code:
html, body {
width: 100%;
height: 100%; } body{ background-image: linear-gradient(45deg, #7A88FF, #7AFFAF); } Browser draws a imaginary line through the center of the element, 45 ° point scale, therefore, the transition from the lower left corner elements start to the end of the upper right corner.
Here recommend a very fun website:
https://codepen.io/thebabydino/full/qgoBL
Color code
You can add as many colors as required. Add extra color is called color (color stop). PS to understand color code easier to understand.
After adding color, background color will be the transition from the first to the second color, and then the transition from the second color to a third color, a color gradient until the last date.
Add color:
CSS Code:
html, body {
width: 100%;
height: 100%; } body{ background-image: linear-gradient(to right, black, white, black); } 
The browser will average distribution of each color.
Finally, you can also add a color value in the back, clearly indicate the location of each color patch.
The figure CSS code:
html, body {
width: 100%;
height: 100%; } body { background-image: linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8); } Background color gradient starts from left to right, far left is Rose, cyan becomes 20% of the width of the element, the position of 80% to yellow, and finally blue.
Color placemark not have to use percentages, you can also use pixels or em values. However, the percentage is the most flexible, as will the width or height of the element varies.
When using multi-color gradients, the first and last color color without specifying the location, because the browser will Jiading first color starts at 0% position, the end of the last color in the 100% position.
Unless want the first color or the color of a final position on the designated starting position, only need to specifically targeted.
Such as:
CSS Code:
html, body {
width: 100%;
height: 100%; } body { background-image: linear-gradient(to right, #E94E65 20%, #15A892 40%, #A89215 60%, #1574A8 80%); } 
The first color value (# E94E65) has a position value (20%). Thus, the background color 20% of the width of the front transverse element is pure pink. It has become blue from pink to start from a position of 20%. Up to 40% of the end position entirely pink.
此外，因为元素可以有多个背景图，所以也能有多个渐变背景。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: linear-gradient(to bottom, cyan, transparent), linear-gradient(225deg, magenta, transparent), linear-gradient(45deg, yellow, transparent); } 在【CSS】同时使用多个背景图这个笔记的最后有记到，使用多个背景图时，最先用到的背景图会在最上层。
IE的支持程度
IE9及之前的版本都不支持渐变。如果一定要使用渐变，要为IE9及之前的版本提供后备颜色。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-color: #FC0; background-image: linear-gradient(to bottom, #900, #FC0, #900); } IE9会应用指定的背景色，因为不支持线性渐变，会跳过第二个声明。其他浏览器会应用背景色，还会创建渐变，渐变会覆盖背景色。
如果使用的是RGBA颜色（RGBA颜色可见【CSS】着色与透明笔记），设置了一定程度的透明度，且不想透过渐变看到背景色。此时可以使用简写的 background 属性，覆盖 background-color 属性（这是简写的background属性的一个比较怪异的行为，可见【CSS】背景基础知识简写部分）。所以可以这样写。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-color: #FC0; background: linear-gradient(to bottom, rgba(153, 0, 0, .5), #FC0, rgba(153, 0, 0, .5)); }
平铺的线性渐变
background-image: repeating-linear-gradient();
平铺的线性渐变其实就是在普通的渐变基础上多了一个重复的效果。
平铺的线性渐变定位色标用的是像素值或者em值，这里百分比不是很好用，至少我理解起来比较费劲。
先看效果图
例1 CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px); } 上面例1中，定义了渐变的角度，浏览器从左下角开始绘制渐变，前20像素是绿色，此后直至30像素的位置过渡到紫色，然后直至40像素的位置再过渡到绿色。绘制完这个渐变后，浏览器会像平铺图像那样把这个渐变铺满整个背景。
例2 CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: repeating-linear-gradient(45deg, #66CC99 20px, #6666CC 20px, #6666CC 30px, #66CC99 30px, #66CC99 40px); } 
注意例2中对色标的定位。这样设置色标的位置，可以控制不同颜色在过渡中的强度。使得各个颜色过渡之间的边界变得清晰，形成条纹效果。
径向渐变
background-image: radial-gradient();
径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(#99CCCC, #7171B7); } 
上述代码会在元素的显示范围内创建一个椭圆形，把渐变的中心点（绿色）放在元素的中心上。
我们还可以在颜色值前面加上 circle 关键字，创建圆形的渐变。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(circle,#99CCCC, #7171B7); } 
设置径向渐变的中心点
可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值，指定渐变中心的位置。
例如↓
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(circle at 20% 20%, #99CCCC, #7171B7); } 
就把中心点设置在元素的左上方（20% 20%）。
closest-side：告诉浏览器从中心点向外扩展渐变，到离中心点最近的一边结束。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(closest-side at 20% 20%, #99CCCC, #7171B7); } 
closest-corner：以离渐变中心点最近的元素顶角计算渐变的范围。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(closest-corner at 20% 20%, #99CCCC, #7171B7); } 
farthest-side：以离渐变中心点最远的那一边计算圆的半径。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(farthest-side at 20% 20%, #99CCCC, #7171B7); } 
farthest-corner：以离渐变中心点最远的顶角计算圆的半径。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(farthest-corner at 20% 20%, #99CCCC, #7171B7); } 
色标
和线性渐变一样，径向渐变也可以使用多个色标。而且能设定各个色标的位置。
CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: radial-gradient(circle at 20% 40%,#99CCCC 20%, #7171B7 40%, #CCCC99 60%, #4F9C9C 80%); } 
设置颜色时，可以使用任何有效的CSS颜色值。可参考【CSS】着色与透明
IE的兼容性
与线性渐变一样，IE9及之前的版本都不支持径向渐变，解决方法和线性渐变一样。
平铺的径向渐变
background-image: repeating-radial-gradient();
原理和前面讲到平铺的线性渐变一样。
例1 CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 40px, #CCCC99 60px, #4F9C9C 80px, #99CCCC 100px); } 
例2 CSS代码：
html, body {
width: 100%;
height: 100%; } body { background-image: repeating-radial-gradient(circle at 20% 40%,#99CCCC 20px, #7171B7 20px, #7171B7 40px, #CCCC99 40px, #CCCC99 60px, #4F9C9C 60px, #4F9C9C 80px, #99CCCC 80px, #99CCCC 100px); } 
注意：
为了让平铺的径向渐变看起来比较流畅，结束颜色应该与起始颜色相同。这样能让颜色自然地回归最初的颜色。
因为Web浏览器会把线性渐变和径向渐变当成背景图，所以可以使用控制背景图的其他属性，比如background-size、background-position等。
作者：Rabbit_svip
链接：https://www.jianshu.com/p/58b340a037ea
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。