CSS 渐变生成器
可视化编辑线性、径向、锥形渐变，拖拽色标、调角度与形状，一键复制 CSS 代码。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传CSS渐变gradient样式生成
色标编辑器
点击色条空白处可直接添加色标；拖动圆点调整位置，双击圆点打开取色器。
实时预览
选中色标
请点击色条上的圆点选择一个色标。
渐变参数
0° = 向上，顺时针增大。拖动圆点或输入角度均可。
渐变预设
CSS 代码
历史记录
工作原理
- 1内部状态为 `{ type, angle, shape, size, from, position, stops[] }`，其中每个色标保存颜色与百分比位置，序列化为标准 CSS 渐变函数后应用到预览元素。
- 2色标位置按升序输出 CSS：CSS 允许乱序但不同浏览器插值行为可能不一致，显式排序更稳妥。允许两个色标重合，从而形成硬边（色带）过渡。
- 3角度语义遵循 CSS 规范：0° 指向正上方（12 点方向），顺时针为正。角度盘 UI 与之一致，避免「0° 指向右侧」的常见误解。
- 4随机生成不用完全随机色：先随机基准色相，再按 +30/+60/+120/±180 等和谐规则派生色相，统一饱和度与亮度区间，并保证色标间距 ≥ 8%，避免产生脏色与挤在一起的色标。
- 5所有计算与渲染都在浏览器本地完成，不发起任何网络请求；历史记录保存在 localStorage，最多 30 条。
常见问题
复制的 CSS 与预览效果一致吗？
一致。预览元素应用的就是输出的那条渐变函数，粘贴到你的样式表中即可得到相同效果。推荐使用 background-image 形式，便于与 background-color 等其它背景属性共存。
角度 0° 是指向右方还是上方？
0° 指向正上方（12 点方向），角度顺时针增大，这与 CSS 规范一致。界面的角度方向盘已按此绘制，拖动圆点即可同时改变角度数值。
怎样做出「硬边」色带效果？
选中一个色标后点击「切换硬边」，工具会在其右侧插入一个同位置的色标，两色之间不再平滑过渡而形成清晰色带。再次点击可取消。
为什么提示「色标位置过于集中」？
当所有色标的位置跨度小于 8% 时，渐变会挤在一小段区间内，视觉上几乎看不出变化。提示出现时建议拉开色标间距。
支持哪些颜色格式？
色标以 HEX 存储，界面与输出均可切换为 rgb() 或 hsl() 显示；你也可以在输入框内直接粘贴 HEX 颜色。
数据会上传吗？
不会。所有计算、渲染与复制都在浏览器本地完成，不发起任何网络请求，断网也能正常使用。