免费工具
CSS Gradient Generator
以可视化方式构建线性、径向和圆锥 CSS 渐变。拖动颜色停止点，调整角度和位置，复制现成的 CSS。
CSS
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);类型
角度135°
颜色停止点
0%
100%
预设
渐变类型
线性渐变沿任意角度的直线过渡。径向渐变从中心点辐射。圆锥渐变围绕中心点扫过 — 对饼图和色轮很有用。
使用方法
- 选择渐变类型（线性、径向或圆锥）。
- 添加或拖动颜色停止点以定义颜色。
- 将 CSS 输出直接复制到你的样式表中。
所有处理都在你的浏览器中进行 — 不会向任何服务器发送任何数据。
常见问题
- 生成的 CSS 跨浏览器兼容吗？
- 是的。输出使用所有现代浏览器都支持的标准 CSS 渐变语法。
- 我能分享渐变吗？
- 能。点击分享 — 渐变状态会编码在 URL 中，你可以复制并发送。