CSS渐变有两种

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 

• 径向渐变（Radial Gradients）- 由它们的中心定义

由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。

先来了解线性渐变 linear-gradients

线性渐变linear-gradients

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

1.渐变方向

默认为从上到下

background-image: linear-gradient(red, blue);

使用方向指向

background-image: linear-gradient(to right,red, blue);

还可以使用 to top left , to bottom right等组合方向

使用角度

background-image: linear-gradient(45deg,red, blue);

正上方为起始0deg，向顺时针方向一周为360deg，要注意的是，在该语法中的角度值为结束处颜色。

2.渐变停止位置

停止位置要比方向复杂。

颜色后可以用一个位置值(如50%)来指定渐变的终止点位置。

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的停止点，颜色之间的中点是两个颜色颜色转换的中点

没听懂吗，那看个例子。如从20%处开始，到50%结束的红蓝渐变：

background-image: linear-gradient(90deg,red 20%, blue 50%);

理论上，前面颜色的停止点必须小于后面颜色的停止点，否则后面颜色的停止点会被覆盖。

颜色允许有多个停止点，但一般不会用到，因为。比如下面这行代码结果等同以上例子

background-image: linear-gradient(90deg,red 5% 20%, blue 50% 90%);

在没有明确标示停止点的颜色上。会有默认隐式的停止点。

默认情况下，如果不带 0% 终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到 100% 标记，或者如果在最后一个没有声明长度，则在 100% 标记处。

关于渐变过渡的中间点

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置

继续用例子说明：

一个从红0%到蓝100%的渐变过渡中间点默认在50%处，将其移动动30%处。

background-image: linear-gradient(90deg,red, 30%, blue);

3.多个颜色

background-image: linear-gradient(90deg,red, orange, yellow, green, lightblue, blue);

4.重复

可以使用repeating-linear-gradient重复渐变效果：

background-image: repeating-linear-gradient(90deg, red, blue 50%);

径向渐变radial-gradient

语法为：

radial-gradient(shape size at position, start-color, ..., last-color);

一个红到蓝的径向渐变：

background-image: radial-gradient(red, blue);

1.形状

• ellipse (默认): 指定椭圆形的径向渐变

• circle ：指定圆形的径向渐变

  background-image: radial-gradient(ellipse, red, blue);
  background-image: radial-gradient(circle, red, blue);

2.尺寸

• farthest-corner (默认) : 渐变的边缘形状与容器距离渐变中心点最远的一个角相交

• closest-side ：渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）

• closest-corner ： 渐变的边缘形状与容器距离渐变中心点最近的一个角相交

• farthest-side ：与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边

简单点理解，就是渐变的远端与容器四边或四角的距离关系。这里边与角分别一个实例。

渐变到最近边例子：

background-image: radial-gradient(circle closest-side, red, blue);

渐变到最远角例子：

background-image: radial-gradient(circle farthest-corner, red, blue);

3.位置(中心点)

与background-position或者transform-origin类似。如缺省，默认为中心点。语法为：

at position

举个例子：

background-image: radial-gradient(circle closest-side at 20% 20%, red, blue);

4.停止位置，多颜色，重复

与线性渐变相同。可直接参照上方说明。

径向渐变的重复方法为： repeating-radial-gradient()

一个例子：

background-image: repeating-radial-gradient(red, blue 10%);

大至就这么多的内容。为了巩固，来看看一些有趣的例子。

CSS渐变的脑洞应用

CSS渐变背景纹理

格子

:root {
  --blue: #d5e7ee;
  --white: rgba(252, 242, 221, 0);
}  
.demo{
  width: 210px;
  height: 210px;
  background-image:
  repeating-linear-gradient(90deg, var(--blue) 0px, var(--blue) 10px, var(--white) 10px, var(--white) 20px),
  repeating-linear-gradient(0deg, var(--blue) 0px, var(--blue) 10px, var(--white) 10px, var(--white) 20px);
}

棋盘格

.demo{
  width: 200px;
  height: 200px;
  background-image:
  linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
  linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

点点格

.demo{
  width: 200px;
  height: 200px;
  background-image: radial-gradient(#fff0c0, #fff0c0 5px, #ff7b7b 5px);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

制作花式分割线，可控虚线：

一条分割线能耍什么花样

更多大量好玩的CSS 渐变纹理效果不在此罗列。请直接移步以下链接把玩。

https://projects.verou.me/css3patterns/

参考资料： https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient