CSS背景渐变多颜色的控制主要通过linear-gradient和radial-gradient两个核心函数实现，开发者可以通过调整颜色节点、位置参数、渐变方向等属性，灵活实现不同的多颜色渐变效果。
线性渐变的多颜色控制
线性渐变是沿着一条直线方向过渡的颜色效果，多颜色控制的核心是设置多个颜色节点，并可选指定每个节点的位置。
基础多颜色线性渐变
默认情况下，多个颜色会均匀分布在整个渐变区域，第一个颜色在起始位置，最后一个颜色在结束位置，中间颜色按顺序排列。
/* 三色均匀分布的水平线性渐变 */
.multi-color-linear {
width: 300px;
height: 200px;
background: linear-gradient(red, yellow, blue);
}
指定颜色节点位置
可以在颜色后面添加百分比或者长度值，明确该颜色在渐变中的位置，从而控制颜色的分布范围。
/* 自定义颜色节点位置的三色渐变 */
.custom-position-linear {
width: 300px;
height: 200px;
/* 红色占前20%，黄色从20%到70%，蓝色占后30% */
background: linear-gradient(red 20%, yellow 70%, blue 100%);
}
调整渐变方向
线性渐变默认是从上到下的方向，可以通过参数调整渐变的角度或者方向关键词。
/* 45度角的多颜色线性渐变 */
.angle-linear {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
}
/* 从左到右的多颜色线性渐变 */
.direction-linear {
width: 300px;
height: 200px;
background: linear-gradient(to right, #ff9900, #3366cc, #cc3366);
}
径向渐变的多颜色控制
径向渐变是从一个点向四周扩散的颜色过渡效果，多颜色控制同样可以设置颜色节点和位置，还可以调整渐变的形状和大小。
基础多颜色径向渐变
默认径向渐变是椭圆形状，从中心向四周过渡，颜色节点均匀分布。
/* 基础三色径向渐变 */
.multi-color-radial {
width: 300px;
height: 200px;
background: radial-gradient(red, yellow, blue);
}
自定义径向渐变参数
可以指定渐变的形状、大小以及颜色节点的位置，实现更精准的多颜色控制。
/* 圆形径向渐变，自定义颜色节点位置 */
.custom-radial {
width: 300px;
height: 200px;
/* 圆形，半径100px，颜色节点分别位于20%、60%、100%位置 */
background: radial-gradient(circle 100px, #ff0000 20%, #00ff00 60%, #0000ff 100%);
}
重复渐变的多颜色控制
如果需要实现多颜色重复循环的渐变效果，可以使用repeating-linear-gradient和repeating-radial-gradient函数，颜色节点的位置需要设置合理的间隔，保证重复效果正常显示。
/* 重复线性渐变，每30%宽度重复一次三色组合 */
.repeating-linear {
width: 300px;
height: 200px;
background: repeating-linear-gradient(
90deg,
red 0%,
yellow 10%,
blue 20%
);
}
/* 重复径向渐变，每50px半径重复一次三色组合 */
.repeating-radial {
width: 300px;
height: 200px;
background: repeating-radial-gradient(
circle,
red 0px,
yellow 25px,
blue 50px
);
}
注意事项
- 颜色节点的位置百分比如果设置不合理，比如后面的节点位置小于前面的节点，会导致颜色硬过渡，没有渐变效果。
- 渐变属于CSS背景属性，不会影响元素的内容区域，设置渐变后如果需要叠加其他背景，可以用逗号分隔多个背景值。
- 旧版本浏览器可能需要添加前缀支持，比如
-webkit-linear-gradient，不过现代浏览器基本已经支持标准语法。
CSSbackground_gradientlinear_gradientradial_gradient修改时间：2026-07-19 16:27:21