CSS 背景渐变实战：linear-gradient 与 radial-gradient 一文通-优快云博客

在 CSS3 之前，背景只能是纯色或贴图。现在用 linear-gradient() 和 radial-gradient()，可以直接在 CSS 里画平滑的颜色过渡——不用切图、不占网络请求、随容器缩放依旧清晰。

关键认知：渐变不是颜色值，而是图像值（gradient 类型），所以它写在 background-image（或 background 简写）上，不能写在 background-color 里。

一、线性渐变 linear-gradient

1. 语法

background-image: linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ...);

方向有三种写法：

关键字：to top / to right / to bottom right（带 to）
角度：45deg / 135deg（不带 to，0deg 朝上，顺时针增大）
省略：等价 to bottom（从上往下）

颜色至少两个，后面可跟位置（% 或 px），不写位置则平均分布。

2. 常用写法

/* 默认自上而下 彩虹 */
background-image: linear-gradient(red, orange, yellow, green, blue);

/* 从左到右 */
background-image: linear-gradient(to right, red, blue);

/* 左上到右下 */
background-image: linear-gradient(to right bottom, red, blue);

/* 30度角 */
background-image: linear-gradient(30deg, red, blue);

/* 精确控制色标位置 */
background-image: linear-gradient(90deg, red 0%, red 40%, blue 40%, blue 100%);

最后一种相邻色标同位置 → 硬边缘（常用来做条纹）。

3. 色标位置与硬停（hard stop）

background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 40%, #d946ef 100%);

不写位置：等距平分
写 %：精确卡点
两个颜色写同一位置：瞬间切换，不做过渡

4. 角度对照表（容易记反）

角度	等价关键字
0deg	`to top`
90deg	`to right`
180deg	`to bottom`（默认）
270deg	`to left`

二、径向渐变 radial-gradient

1. 语法

background-image: radial-gradient(形状 尺寸 at 中心点, 颜色1 位置1, 颜色2 位置2, ...);

参数都可省略，顺序不强制，但 at 位置 一般跟在形状/尺寸后。

2. 中心点

省略 → 元素正中心 at center
关键字：at top / at left top
百分比：at 30% 70%
长度：at 20px 40px

3. 形状与尺寸

形状：circle（正圆） / ellipse（椭圆，默认）
尺寸关键字：closest-side / farthest-side / closest-corner / farthest-corner（默认）

/* 正中心圆形 */
background-image: radial-gradient(circle, red, green, blue);

/* 左上角圆形光斑 */
background-image: radial-gradient(circle at top left, red, blue);

/* 控制结束圈大小 */
background-image: radial-gradient(circle closest-side at center, red, blue);

4. 典型场景

按钮高光、聚光灯、暗角（vignette）、头像光晕：

.spotlight{
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), transparent 60%);
}

三、多层渐变与重复渐变（顺手提一句）

渐变是图像值，background 可逗号叠加多层：

background:
  linear-gradient(135deg, rgba(102,126,234,.8), transparent 60%),
  radial-gradient(circle at 80% 20%, rgba(217,70,239,.25), transparent 50%),
  #f7fafc;

重复渐变做条纹/同心圆：

background: repeating-linear-gradient(45deg, #667eea 0 10px, #764ba2 10px 20px);
background: repeating-radial-gradient(circle, #667eea 0 10px, #764ba2 10px 20px);

四、案例

background-image: linear-gradient(red, orange, yellow, green, blue);   /* 自上而下的彩虹 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue); /* 左→右 */
background-image: linear-gradient(30deg, red, orange, yellow, green, blue); /* 30度斜向 */
background-image: radial-gradient(red, green, blue); /* 中心椭圆 */
background-image: radial-gradient(circle at top, red, green, blue);