CSS 渐变生成器
拖动色标、调角度，实时看到渐变效果，一键复制可直接粘贴的 CSS 代码。支持线性、径向、锥形三种渐变。
色标（颜色 + 位置 %，按位置自动排序）
CSS 代码
使用指南
- 选类型与角度
先选线性、径向或锥形。线性和锥形用角度控制方向，径向用形状控制 circle / ellipse；不适用的控件会自动置灰。
- 调色标
每个色标由一个颜色选择器和一个位置百分比组成，点「加色标」增加，点 × 删除，最少保留两个。位置不按输入顺序，代码里会按百分比排序。
- 复制代码
下方文本框里就是最终 CSS，点「复制代码」拿走，粘到样式表的规则块里即可。
常见问题
为什么预览和代码永远是同一份？
预览元素的背景值就是由生成代码那段字符串直接赋上去的，中间没有再经过一次拼装，所以两者不可能出现偏差。
90deg 到底是哪个方向？
CSS 的渐变角度是顺时针从「向上」开始算：0deg 从下往上，90deg 从左往右，180deg 从上往下。这个方向和直觉里的数学角度相反，容易记错。
位置相同的两个色标会怎样？
会在那个位置形成一条硬边，而不是平滑过渡。想做条纹背景就把两个色标设成同一个百分比。
锥形渐变能做什么效果？
适合做饼图、色轮、雷达扫描光效和进度环。它绕中心按角度铺色，和线性渐变的铺色逻辑完全不同。