CSS 渐变生成器
可视化生成 linear / radial / conic 渐变：颜色停靠点的增删与位置、角度、位置、尺寸、重复渐变，实时预览并一键复制 background-image 代码。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
重复渐变
45deg
渐变停靠点
预设
点击任意预设直接套用
预览
预览会随参数实时更新
CSS 代码
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 100%);
这个工具能做什么
- 给按钮、卡片或页面背景配渐变时，先把颜色停靠点和角度调顺眼，再复制一行 background-image 贴进样式表。
- linear / radial / conic 三种类型都能试：径向渐变可以调形状、尺寸与中心位置，锥形渐变适合做色轮和加载指示器。
- 需要重复条纹或进度条纹理时勾选「重复渐变」，输出 repeating- 前缀，省掉手写 background-size 的反复试错。
- 6 个预设（日落、海洋、极光、聚光灯、色轮、彩虹）可以直接当作配色参考，也可以当作起点改色。
示例
输入
预设「日落」：linear、角度 45deg、停靠点 #FF512F 0% 与 #F09819 100%
输出
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 100%);
颜色统一输出大写 hex，停靠点按位置升序排列；切换成径向时输出 radial-gradient(circle closest-side at 50% 50%, …)。
常见问题
颜色停靠点的位置可以乱填吗？
可以随便填，输出前会按位置升序排序，位置相同则保持你添加的先后顺序。位置超出 0–100 会被夹到边界并保留一位小数，所以不用担心写出非法的 CSS。
为什么径向渐变有时没有尺寸关键字？
尺寸选 farthest-corner（默认值）时不会输出关键字，因为那就是 CSS 的默认行为，写出来只是噪音；选 closest-side 等其它值才会补上。
锥形渐变的「角度」是什么？
是 from 起始角，0deg 从正上方开始顺时针转。角度会先归一到 0–360，所以填 -45 会写成 315deg、填 400 会写成 40deg。
停靠点至少要有几个？
一个都不能少：没有停靠点时工具会直接报错。通常两个就够用，做条纹或多色环时再加，位置用百分数（0–100）表示。
生成的代码会发到服务器吗？
不会。渐变值完全是本地字符串拼接，页面不发任何网络请求，断网也能用。
关键词：cssgradientlinear-gradientradial-gradientconic-gradient渐变线性渐变径向渐变锥形渐变配色background-image