CSS linear-gradient：从基础到高级，一篇文章搞懂线性渐变
什么是 linear-gradient？
linear-gradient() 是 CSS 中用来创建线性渐变的函数——它让颜色沿着一条直线平滑过渡。浏览器实时渲染，无需加载图片，天然适配任何屏幕尺寸，是现代 UI 开发中最常用的视觉工具之一。
一个最简单的例子：
background: linear-gradient(#667eea, #764ba4);
就这样，你得到了一个从紫蓝到深紫的渐变背景。
关键认知：
linear-gradient()生成的是<image>数据类型，不是<color>。所以它只能用在background-image、border-image、mask-image等接受图片的属性中，不能用在background-color上。
参考：linear-gradient() - CSS | MDN
14种演示效果
语法结构
linear-gradient(
[ 方向 || 颜色插值方法 ]?,
色标列表
)
三件事决定一个渐变的样子：方向、颜色、颜色之间的过渡方式。
一、方向控制
方向是线性渐变的灵魂。不指定方向时，默认从上到下（to bottom / 180deg）。
关键字方向
linear-gradient(to right, #f093fb, #f5576c) /* 左→右 */
linear-gradient(to bottom right, #4facfe, #00f2fe) /* 左上→右下 */
角度方向
当你需要更精确的控制，用角度：
linear-gradient(135deg, #fa709a, #fee140)
角度规则很简单：0deg 指向上方，顺时针递增。所以 90deg 指向右，180deg 指向下，45deg 指向右上。
二、色标（Color Stops）
色标定义"什么颜色出现在什么位置"。
基础用法
/* 两个颜色，均匀分布 */
linear-gradient(red, blue)
/* 多个颜色，自动均匀分布 */
linear-gradient(#ff0844, #ffb199, #f5576c, #667eea)
指定位置
用百分比或绝对长度控制颜色的精确位置：
linear-gradient(red 0%, yellow 50%, blue 100%)
/* 等价于 */
linear-gradient(red, yellow 50%, blue)
不指定位置时，第一个色标默认在 0%，最后一个在 100%，中间的自动均匀分配。
硬边界——当条纹用
把两个相邻色标放在同一位置，就得到锐利的分界线，而不是平滑过渡：
/* 左红右蓝，中间一刀切 */
linear-gradient(90deg, red 50%, blue 50%)
/* 四色条纹 */
linear-gradient(90deg,
#667eea 0% 25%, #764ba4 25% 50%,
#f093fb 50% 75%, #f5576c 75% 100%
)
双位置色标（CSS Images Level 4）
一个颜色可以声明两个位置，相当于连续两个同色色标的简写：
/* 旧写法 */
linear-gradient(red 0%, red 25%, blue 25%, blue 50%, green 50%, green 75%)
/* 新写法 */
linear-gradient(red 0% 25%, blue 25% 50%, green 50% 75%)
颜色插值提示（Color Hint）
默认情况下，两个色标之间的过渡中点恰好在 50% 的位置。你可以用插值提示移动这个中点：
/* 中点移到 20% 的位置——红色更快地过渡到蓝色 */
linear-gradient(red 10%, 20%, blue 90%)
三、颜色插值方法（CSS Color Level 4）
这是一个容易被忽略但影响巨大的特性。同样的 blue → red，不同颜色空间的插值结果完全不同：
/* 默认 srgb——中间会经过灰暗的紫色 */
linear-gradient(to right in srgb, blue, red)
/* oklab——更均匀、更自然的过渡 */
linear-gradient(to right in oklab, blue, red)
/* oklch longer hue——绕色相环走长弧，经过青绿黄橙 */
linear-gradient(to right in oklch longer hue, blue, red)
实战建议：当你觉得渐变中间色"脏"或"灰"时，试试 in oklab 或 in oklch，往往能获得更鲜艳、更均匀的过渡。
参考：linear-gradient() - CSS | MDN
四、高级技巧
渐变支持透明度，所以可以把多个渐变叠在一起：
background:
linear-gradient(135deg, rgba(102,126,234,0.6), transparent 60%),
linear-gradient(225deg, rgba(240,147,251,0.5), transparent 60%),
linear-gradient(45deg, rgba(245,87,108,0.4), transparent 60%),
#0f0f1a;
先声明的层在上面。利用透明度让下层透出来，可以营造丰富的深度感。
.gradient-text {
background: linear-gradient(135deg, #667eea, #f093fb, #f5576c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
原理：渐变作为背景绘制 → background-clip: text 只保留文字区域的背景 → color: transparent 让文字本身透明，露出底下的渐变。
参考：background-clip - CSS | MDN
.gradient-border {
border: 2px solid transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(135deg, #667eea, #f093fb) border-box;
}
关键在于 padding-box 和 border-box 两个背景裁剪区域的分层：内容区被纯色覆盖，只有边框区域露出渐变。
.mask-border::after {
background: linear-gradient(135deg, #667eea, #f093fb);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
这里的 linear-gradient(#000 0 0) 是一个巧妙用法——它生成一个纯黑矩形（从 0 到 0 位置都是黑色，即整个区域纯黑）。配合 mask-composite: exclude，两个遮罩做差集运算，只保留边框区域，让渐变只在边框上可见。
.shimmer {
background: #1a1a2e;
position: relative;
overflow: hidden;
}
.shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
110deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%
);
background-size: 250% 100%;
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
原理：斜向渐变中间有一条半透明亮带 → background-size 放大到 250% → 动画移动 background-position，让亮带从一侧扫到另一侧。
.grid-bg {
background:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 28px 28px;
}
每条渐变只画 1px 宽的半透明线，然后通过 background-size 重复铺满，形成网格。
.fade-mask {
mask-image: linear-gradient(
to right, transparent, #000 20%, #000 80%, transparent
);
}
用渐变作为遮罩，控制元素的可见区域。两侧透明 = 不可见，中间黑色 = 可见，实现边缘淡出效果。
五、常见问题
渐变不显示？
-
检查是否用在了
background-color上——渐变是图片，只能用于background-image -
检查色标位置是否合理（比如
red 80%, blue 20%会导致蓝色被覆盖）
渐变中间颜色发灰？
默认的 srgb 插值在亮度差异大的颜色之间会经过灰暗的中间值。改用 in oklab 或 in oklch 通常能解决。
需要浏览器前缀吗？
现代浏览器已全面支持标准语法。-webkit-linear-gradient 等前缀只在需要兼容极老浏览器时才需要。CSS Color Level 4 的 in oklch 等需要 Chrome 111+、Firefox 113+、Safari 16.2+。
六、一句话总结
linear-gradient 不仅仅是"两种颜色之间的过渡"——结合多层叠加、mask 遮罩、background-clip 分层、颜色插值空间选择等技巧，它能实现渐变边框、微光动画、网格背景、文字渐变、边缘淡出等丰富效果，是现代 CSS UI 开发中性价比最高的视觉工具之一。