在CSS中设置渐变，本质上是利用background-image属性生成一种平滑过渡的图像。开发者无需单独制作PNG或SVG素材，就能让元素呈现从一种颜色到另一种颜色的连续变化效果。CSS渐变主要分为三类：线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）。它们都可以直接写在background-image或background简写属性中，并且支持多层叠加、颜色位置控制以及重复模式。
一、线性渐变：linear-gradient的参数与角度控制
线性渐变是最常用的渐变形式，它沿着一条直线从起点向终点进行颜色插值。基本语法为linear-gradient(方向, 颜色1, 颜色2, ...)。其中方向既可以使用关键字，也可以使用具体角度。例如to right表示从左到右，to bottom right表示从左上到右下，而45deg表示渐变线与水平方向成45度角。理解角度时需要注意：0deg对应从下到上，90deg对应从左到右，角度按顺时针方向增加。
渐变线决定了颜色过渡的方向，而色标（color stop）则控制颜色在渐变线上的具体分布。每个色标由颜色值和可选的位置百分比组成。如果只写颜色不写位置，浏览器会自动平均分配色标。例如linear-gradient(to right, red, yellow, green)会让三种颜色在容器中均匀过渡。若希望某一颜色在特定位置开始或结束，可以写成linear-gradient(to right, red 0%, yellow 30%, green 100%)。当两个相邻色标的位置相同时，会形成硬边效果，不再有平滑过渡。
/* 基础水平渐变 */
.box {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}
/* 对角渐变与角度控制 */
.card {
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* 多色标渐变 */
.bar {
background-image: linear-gradient(to right, #f83600 0%, #f9d423 40%, #e14fad 100%);
}
/* 重复线性渐变实现条纹 */
.stripes {
background-image: repeating-linear-gradient(45deg, #333 0 10px, #fff 10px 20px);
}
旧版WebKit内核浏览器在实现线性渐变时使用了不同语法，例如-webkit-linear-gradient(left, red, blue)。这种写法不支持to关键字，并且方向表示的是起点而不是终点。如果项目需要兼容较老的Safari或Chrome版本，建议同时书写带前缀的声明，并把方向参数写为相反的语义。现代浏览器已经全面支持标准语法，但移动端混合开发中仍可能遇到旧内核，因此保留前缀写法仍然有必要。
重复线性渐变通过repeating-linear-gradient实现，它会在指定区间内重复颜色序列。这种特性非常适合制作条纹背景、进度条纹理以及表格斑马纹。使用时需要给最后一个色标设置明确的位置，否则重复区间无法正确计算。例如上面代码中的0 10px和10px 20px就定义了一个完整的黑白条纹周期。
二、径向渐变与锥形渐变的配置方法
径向渐变与线性渐变不同，它从一个中心点向外辐射颜色。标准语法为radial-gradient(形状 大小 at 圆心位置, 颜色1, 颜色2, ...)。形状可以是circle或ellipse，默认值为椭圆。圆心位置可以使用百分比、像素值或关键字，例如center、top left。大小除了具体半径外，还可以使用closest-side、farthest-corner等关键字，它们会自动根据容器尺寸计算渐变范围。
一个典型的径向渐变可以写成radial-gradient(circle at center, #ffffff 0%, #a1c4fd 100%)，它会在元素中心形成白色高光，向外过渡为淡蓝色。如果需要制作按钮的立体感，可以把高光点放在顶部，例如radial-gradient(circle at 30% 20%, rgba(255,255,255,0.8), transparent)。径向渐变还能模拟光源照射效果，在卡片或弹窗的角落制造柔光。
/* 中心向外扩散 */
.radial-box {
background-image: radial-gradient(circle at center, #ff9a9e 0%, #fecfef 100%);
}
/* 角落光源效果 */
.light-card {
background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 60%);
}
/* 重复径向渐变形成圆环 */
.ring {
background-image: repeating-radial-gradient(circle, #222 0 5px, #eee 5px 10px);
}
/* 锥形渐变实现色盘 */
.color-wheel {
background-image: conic-gradient(from 0deg, red, orange, yellow, green, blue, purple, red);
}
锥形渐变conic-gradient相对较新，它围绕中心点按角度分布颜色，适合制作色盘、雷达扫描和环形进度条。语法中可以使用from 角度指定起始角度，也可以使用at 位置指定中心点。颜色序列会从起始角度开始依次排列，最后一个颜色如果与第一个相同，则可以形成无缝循环。锥形渐变在CSS遮罩和动画中非常灵活，例如通过改变--angle变量配合JavaScript就能实现动态扫描效果。
重复径向渐变repeating-radial-gradient会不断重复径向色标，通常用来生成同心圆环或波点纹理。需要注意的是，重复径向渐变的绘制成本比普通径向渐变高，尤其是在元素尺寸较大时。如果只是需要几个圆环，手动写多个色标反而更轻量。锥形渐变的浏览器兼容性已经覆盖所有现代浏览器，但在使用时建议提供纯色回退背景，避免旧设备直接显示空白。
三、渐变的高级用法：多层背景、文字与边框效果
CSS渐变可以像普通背景图片一样进行多层叠加，多个渐变之间用逗号分隔。每一层渐变都可以单独控制background-size、background-position和background-repeat。利用这一特性，可以只用CSS实现复杂的网格、十字线、光斑叠加等效果，而不必引入额外图片资源。例如第一层设置小尺寸的交叉线性渐变，第二层设置大范围径向渐变，就能组合出科技感背景。
文字渐变也是渐变的高级应用之一。核心思路是先将背景设置为渐变图像，然后使用background-clip: text将背景裁剪到文字区域，最后把文字颜色设为透明。由于标准属性在某些浏览器中仍需要前缀，通常需要同时写-webkit-background-clip: text和background-clip: text。文字渐变对字体渲染有一定影响，尤其是在Windows平台的部分浏览器中，字形边缘可能出现轻微锯齿。此时可以适当增加字体大小或使用较粗的字重来缓解。
/* 多层渐变背景 */
.multi-bg {
background-image:
linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px),
radial-gradient(circle at 80% 20%, #4facfe, #00f2fe);
background-size: 40px 40px, 40px 40px, 100% 100%;
}
/* 文字渐变 */
.gradient-text {
background-image: linear-gradient(to right, #f093fb, #f5576c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 渐变边框模拟 */
.gradient-border {
border: 2px solid transparent;
background-image: linear-gradient(white, white), linear-gradient(to right, #4facfe, #00f2fe);
background-origin: border-box;
background-clip: padding-box, border-box;
}
渐变边框的实现一般有两种思路。第一种是使用border-image配合渐变函数，但这种方式无法与圆角很好地配合。第二种是使用双层背景技巧：外层渐变作为边框颜色，内层纯色作为内容背景，通过background-clip分别控制裁剪区域。代码中background-clip: padding-box, border-box表示第一层白色裁剪到内边距区域，第二层渐变裁剪到边框区域，从而形成渐变边框效果。
性能方面，线性渐变的绘制开销最小，径向渐变次之，锥形渐变和重复渐变相对较高。在移动端页面中，应避免在大量元素上同时使用复杂渐变或动画化渐变背景。可以使用will-change: background-image提示浏览器提前优化，但不要滥用。对于固定不变的渐变装饰，尽量使用纯CSS绘制并开启硬件加速；对于需要频繁更新的动态渐变，优先考虑在canvas中处理，减少重绘影响。