CSS 渐变生成器

使用方法

1. 打开页面就有一段渐变——第一个结果不需要任何点击。
2. 选类型：「线性」沿角度展开，「径向」从圆形向外扩散，「圆锥」绕中心扫过。线性与圆锥用滑杆调角度。
3. 用取色器设颜色，拖动每个位置（0–100%）。想要多色渐变就点「+ 加色」，不想要了删到只剩两个。
4. CSS 在下方实时更新——点一下复制，贴进任何支持 CSS 的地方即可。

示例

线性 · 90° · #FF5733 @0% → #33A1FF @100%

linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)

这是一段标准线性渐变：左侧 #FF5733 平滑过渡到右侧 #33A1FF；90deg 表示「向右」。换成「径向」得到 radial-gradient(circle, #FF5733 0%, #33A1FF 100%)，换成「圆锥」得到 conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%)。所有值都是 ASCII，原样贴进任何 CSS 即可。

规则、局限与常见问题

• 只支持不透明颜色：取色器是浏览器原生控件，没有透明度。需要半透明请把颜色先换成含 alpha 的形式再回来。
• 只有单段标准形态：线性/径向/圆锥——没有 -webkit- 前缀、没有多层叠加、没有径向尺寸/中心定位等高级参数。
• 色标按你加入的先后排序——不会自动排序，所以位置乱序会故意产生"跳变"渐变。
• 色标在 2 到 8 个之间。删到 1 个时不再生成合法渐变（会提示），而不是伪造一段。
• 没有预设库、没有整页背景套用、没有带值分享链接——分享按钮只分享页面链接；不上传、不存储、不写入 URL。
• 角度对径向渐变无意义，所以角度控件会隐藏，生成的代码也不含角度。

相关工具

拿到渐变之后，通常还会用到这些。