linear-gradient(90deg, #4a9eff, #a371f7)：方向（deg 或 to right）+ 色标列表；radial-gradient(圆心辐射)；conic-gradient(圆锥扫描，/png色环/饼图利器)。色标可加百分比控制位置，用透明色标可做出「光线扫过」效果。
渐变本质是 image，所以能用在 background、border-image、mask 上；配合 background-size + animation 可做流动条纹。硬要扣缺点：大面积高饱和渐变在部分设备上滚动耗电。
<style> .g { height: 60px; border-radius: 8px; margin: 6px 0; } .g1 { background: linear-gradient(90deg, #4a9eff, #a371f7); } .g2 { background: radial-gradient(circle at 30% 30%, #f778ba, #161b22 70%); } .g3 { background: conic-gradient(#e78a3e 0 25%, #21262d 0 50%, #4a9eff 0 75%, #e6edf3 0); } .t { background: linear-gradient(90deg,#e78a3e,#f0c33c); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 22px; font-weight: 700; } </style> <div class="g g1"></div><div class="g g2"></div><div class="g g3"></div> <div class="t">渐变文字</div>