CSS 渐变生成器
以可视化方式创建线性或放射状 CSS 渐变，并直接在浏览器中复制可用的 CSS。
🔒 在您的浏览器本地处理
Loading…
使用方法
- 选择“线性”或“放射状”作为渐变类型。对于线性渐变，可拖动滑块或直接输入数值来设置角度（度）。
- 每个色标都有一个颜色色块和位置（0-100%）。点击色块选择颜色，或输入位置数值来移动该色标在渐变中的位置。
- 点击“添加色标”最多可添加 5 个色标，或点击某色标旁的“移除”将其删除（至少需保留 2 个色标）。
- CSS 输出上方的预览框会随你调整任意控件实时更新——无需点击任何按钮。
- 点击“复制”即可复制生成的 CSS 声明，可直接粘贴到你的样式表中。
功能特点
- 支持线性（可调角度）与放射状渐变
- 最多 5 个色标，各自拥有独立的颜色与位置
- 实时预览框，随任意控件调整立即更新
- 一键复制可直接粘贴的 CSS 声明
- 100% 在浏览器端运行——你的渐变数据永远不会离开浏览器
常见问题
这个工具会把我的渐变数据发送到任何地方吗？
不会。渐变的创建与预览完全通过本地 JavaScript 与 CSS 完成——数据从不会被上传或发送到服务器。
最多可以添加多少个色标？
最多 5 个。由于渐变至少需要 2 个色标才有意义，当只剩 2 个色标时，“移除”按钮会被禁用。
角度设置对放射状渐变有作用吗？
没有。此工具中的放射状渐变始终以圆形从中心向外扩散，因此角度设置仅适用于线性渐变。
如果两个色标的位置相同会怎样？
这是允许的，可以有意用来制造清晰的颜色分界，而不是平滑过渡——两个色标都会保留在生成的 CSS 中。
可以把输出结果直接粘贴到我的 CSS 文件中吗？
可以。输出框会显示完整的 `background: ...;` 声明，你可以直接粘贴到样式表或内联样式中使用。