CSS渐变生成器

CSS渐变生成器解决的是「记不住语法、调不准效果」这个日常麻烦。手写 linear-gradient 或 radial-gradient 时，颜色、角度、渐变类型的组合很难在脑子里预演出最终样子，往往要在编辑器和浏览器之间来回改、反复刷新。这个渐变生成器把这一步搬到可视化界面：选好起止两种颜色，切换线性或径向类型，线性模式下再拖动角度，预览框会实时显示背景渐变的样子，下方同步输出可直接复制的 background 代码。

它的核心是把界面上的参数拼成标准的 CSS 渐变函数。线性渐变输出形如 linear-gradient(90deg, 颜色A, 颜色B)，其中角度决定色带的方向；径向渐变则输出 radial-gradient(颜色A, 颜色B)，从中心向四周辐射。真正的渐变绘制由浏览器完成——它在两个色标之间按位置对颜色做插值，默认在 sRGB 色彩空间里逐像素计算，所以两种对比色的中间地带有时会偏灰。因为渐变本质上是 CSS 生成的矢量背景而非位图，它随容器缩放而不失真，也不会额外发一个图片请求，整个生成过程都在你的浏览器本地完成。

最常见的用法是给页面元素快速铺底色。比如做一个登录页，想让整块背景从深蓝过渡到紫色，选好两色、把角度设成 135deg，复制出的 background 直接贴到 body 的样式里就成。又比如做按钮的悬停态，用一条浅到深的线性渐变代替纯色，能让点击区域更有层次；卡片、标签、进度条这些小组件同样适用。设计还原时也方便：对着设计稿里的渐变，边调边比对预览，比盲写数值快得多。

用的时候有两个点容易踩坑。一是角度的方向，CSS 里 0deg 指向正上方、90deg 指向右侧、角度顺时针增大，这和 Canvas、SVG 常用的数学坐标不一样，别把方向记反了。二是这个工具专注两色渐变，如果需要三种以上颜色或自定义每个色标的百分比位置，可以在生成的代码里手动追加逗号分隔的颜色再微调。另外径向渐变本身没有「角度」这个参数，切到径向后角度控件不起作用属于正常现象，不是 bug。

CSS渐变生成器是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“css渐变”、“渐变生成器”、“linear-gradient”，说的都是这个。