CSS 渐变完整指南：linear / radial / conic 实战
从基础语法到多色阶过渡、消除色带、生成炫酷效果，本指南配合渐变生成器一步步教你做出有质感的渐变。
CSS 渐变让纯 CSS 实现复杂背景成为可能。从简单的双色过渡到圆锥、径向、多色阶组合，掌握后能少写很多图片资源。
三种渐变速览
linear-gradient(方向, 色阶)直线方向变化radial-gradient(形状, 色阶)中心向外扩散conic-gradient(from 角度, 色阶)围绕中心旋转，常用于做饼图
方向单位：to top、135deg、to bottom right。
色阶位置
色阶可指定位置百分比：
``
linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%)
``
中间停在 50% 位置；不写位置时自动均分。
消除色带（banding）
简单两色渐变会出现明显条纹，原因是 8 位色深无法表达中间无限种颜色。解决：
- 在中间插入相近过渡色
- 加噪声纹理覆盖
- 用 OKLCH 色彩空间：linear-gradient(in oklch, ...)
radial 与 conic 高级用法
- 径向渐变指定形状与位置：radial-gradient(circle at top right, ...)
- conic 圆锥渐变最适合做饼图：
``
background: conic-gradient(red 0% 25%, blue 25% 75%, green 75% 100%)
``
实战预设
日落：linear-gradient(135deg, #ff6b6b, #feca57)
海洋：linear-gradient(135deg, #667eea, #764ba2)
极光：linear-gradient(135deg, #00c9ff, #92fe9d)
本工具内置 6 种预设，点一下即可应用。
常见问题
渐变和图片哪个性能好？
渐变。GPU 加速，零网络请求，缩放无损失。
能在文字上用渐变吗？
可以。`background-clip: text; color: transparent` 把渐变切到文字形状。
渐变可以动画吗？
渐变本身不能 transition，但可以通过位移、旋转、background-size 让它看起来在动。