渐变就是“CSS图像值”，放在background或者background-image属性中，而不是background-color里。不需要切片图片、不会占用带宽、可以随着容器大小自动调整尺寸，它是现代网页设计常用的方法之一。
线性渐变：方向就是构图
基础语法：
background: linear-gradient(方向, 色标1 位置, 色标2 位置, ...);
有三种方式来表达这个意思：
-
关键字：
to right/to bottom right -
角度：
45deg（0deg朝上，顺时针递增） -
省略：默认
to bottom
/* 斜向双色 */
.card {
background: linear-gradient(135deg, #667eea, #764ba2);
}
/* 多色标精确定位 */
.rainbow {
background: linear-gradient(
90deg,
#ff5f6d 0%,
#ffc371 35%,
#47e0a0 70%,
#5b86e5 100%
);
}
硬停技巧：相邻色标写在同一位置，取消过渡，直接切色。
.split {
background: linear-gradient(
90deg,
#1f2937 0 50%,
#f59e0b 50% 100%
);
}
硬停可以很快完成进度条、色块分割和条纹底纹的效果，不需要额外的DOM元素。
径向渐变：光线由一个点向外扩散
语法结构：
background: radial-gradient(形状 尺寸 at 中心点, 色标...);
-
形状：
circle正圆 /ellipse椭圆（默认） -
尺寸：
closest-side/farthest-corner等 -
中心点：
at center/at 30% 20%/at top left
/* 左上角光斑 */
.spotlight {
background: radial-gradient(
circle at 20% 15%,
rgba(255,255,255,0.25) 0%,
transparent 60%
);
}
/* 暗角效果 */
.vignette {
background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(0,0,0,0.55) 100%
);
}
径向渐变可以用来制作聚光灯、头像光环、卡片高光以及镜头暗角等效果，比线性渐变更具有“空间感”。
重复渐变：将渐变转换成纹理
重复的线性渐变
/* 45°细条纹 */
.stripes {
background: repeating-linear-gradient(
45deg,
#eef2ff 0 12px,
#c7d2fe 12px 24px
);
}
重复的径向渐变
/* 同心圆环 */
.rings {
background: repeating-radial-gradient(
circle at center,
#1e293b 0 6px,
#334155 6px 14px
);
}
点阵式背景（小圆点均匀分布）
.dots {
background-color: #f8fafc;
background-image: radial-gradient(#94a3b8 1.5px, transparent 1.5px);
background-size: 18px 18px;
}
渐变的好处是可以用纯CSS来制作出条纹、格子、圆形和雷达线等图案，代替传统的平铺图像。
创意组合技法
1. 多层渐变叠加
.hero {
background:
linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.75)),
radial-gradient(circle at 80% 20%, rgba(139,92,246,0.35), transparent 50%),
linear-gradient(135deg, #0f172a, #1e293b);
}
用逗号隔开，上面一层是上层的文字，下面一层是下层的文字，可以叠加渐变色和图像。
2. 渐变文字
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
只给大标题用，要保证它的可阅读性。
3. 渐变边框
.btn {
position: relative;
border-radius: 12px;
background: #0f172a;
}
.btn::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 14px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
z-index: -1;
}
4. 现代色彩空间插值
默认的sRGB混合互补色会显得比较暗淡，可以使用oklch来调整：
.smooth {
background: linear-gradient(in oklch, #ff5f6d, #5b86e5);
}
避坑要点
-
渐变不等于颜色，不要把它放在
background-color里 -
0度向上，90度向右，顺时针方向
-
硬停边缘在低清屏幕上会出现锯齿，可以保留
50% 50.5%的微渐变 -
使用
rgba(...,0)代替transparent，防止出现灰色 -
没有高度的时候渐变就不起作用了，需要设置一个高度或者用里面的东西把高度撑起来
总结
线性渐变用来控制方向节奏，径向渐变来营造光源和空间感，重复渐变使色彩可以平铺使用。三者结合之后，背景就不再是单纯的底色了，而成为了层次、光影以及品牌形象的载体。掌握了色标的位置、硬停切割、中心点偏移以及多层合成等技巧后，就可以用很少量的CSS代码代替大量的图片资源。
