渐变生成器
实时预览并创建精美的 CSS 渐变，支持线性、径向、自定义色标和一键复制。
预设
CSS 代码
随机
类型
角度
135°
预设
CSS 代码
使用方法
只需三个简单步骤，所有操作都在浏览器中完成。
1
选择渐变类型
从线性或径向模式开始，再根据需要设置角度或形状。
2
调整颜色与色标
选择颜色，添加或移除色标，并微调位置，直到预览效果符合预期。
3
复制 CSS 代码
直接使用生成的 CSS，或从预设开始继续调整以适配你的项目。
功能特点
线性与径向
在线性渐变的角度控制和径向渐变之间快速切换。
自定义颜色色标
最多添加 6 个颜色色标，并通过独立位置滑块精确控制。
精美预设
提供 12 个精选渐变，可直接使用或作为设计起点。
一键复制 CSS
一键将可直接使用的 CSS 代码复制到剪贴板。
为什么选择 ToolKnit 渐变生成器？
线性与径向渐变
选择渐变类型和角度，最多添加 6 个色标并实时预览。
即时复制 CSS
只需一次点击，即可复制可直接使用的渐变 CSS。
随机灵感
点击“随机”，发现意想不到的颜色组合。
使用技巧
- ●使用 background-size 创建重复的渐变图案。
- ●径向渐变 适合制作聚光灯效果和按钮高光。
- ●点击声 随机 ，探索意想不到的颜色组合。
常见问题
生成器支持哪些渐变类型？
支持线性和径向 CSS 渐变。线性渐变可通过角度滑块控制方向，径向渐变从中心向外扩散。
最多可以添加多少个颜色色标？
可以使用 2 到 6 个颜色色标，每个色标都有独立的取色器和位置滑块。
可以直接复制 CSS 代码吗？
可以。调整渐变时 CSS 会实时更新，一键即可复制整条规则并粘贴到样式表。
生成的渐变可用于生产环境吗？
可以。生成的是标准 CSS，无需厂商前缀，兼容当前版本的 Chrome、Firefox、Safari 和 Edge。
可以将渐变用于商业项目吗？
可以。输出是普通 CSS 代码，可免费用于个人或商业项目，无需署名。