CSS 渐变生成

CSS 渐变生成怎么用

1. 在「渐变类型」里选择一项
2. 在「角度 / 起始角（deg）」里拖动滑块调整
3. 在「径向形状（仅径向生效）」里选择一项
4. 在「色标 1」里选择颜色
5. 在「色标 1 位置（%）」里拖动滑块调整
6. 在「色标 2」里选择颜色
7. 在「色标 2 位置（%）」里拖动滑块调整
8. 在「启用第三个色标」里按需勾选
9. 在「色标 3」里选择颜色
10. 在「色标 3 位置（%）」里拖动滑块调整
11. 输入过程中会自动计算，结果实时刷新，无需点按钮
12. 点击「生成」得到结果
13. 结果出现在下方，点「复制结果」即可带走

需要填什么

• 渐变类型：选择一项
• 角度 / 起始角（deg）：拖动滑块调整
• 径向形状（仅径向生效）：选择一项
• 色标 1：选择颜色
• 色标 1 位置（%）：拖动滑块调整
• 色标 2：选择颜色
• 色标 2 位置（%）：拖动滑块调整
• 启用第三个色标：按需勾选
• 色标 3：选择颜色
• 色标 3 位置（%）：拖动滑块调整

CSS 渐变生成能用来做什么

• 做页面时先把 CSS 渐变生成 的效果调出来，再复制代码进项目
• 对照设计稿快速还原间距、圆角、阴影等参数
• 检查配色是否满足无障碍对比度要求

这个工具的特点

• 所有计算都在你的浏览器里完成，粘贴的内容不会上传到服务器
• 无需注册登录，打开页面即可使用，手机端同样顺手
• 可视化调参、实时预览，代码可直接复制

常见问题

生成的代码能直接用吗？

输出的是标准 CSS，可直接粘贴使用。若项目用了预处理器或 CSS-in-JS，按需改成对应写法即可，属性值本身是通用的。

需要考虑浏览器兼容吗？

输出以现代浏览器为目标。若你要兼容较老的浏览器，注意渐变、clip-path、grid 等属性需要加前缀或准备降级方案。

用这个工具需要付费或注册吗？

都不需要。DevKit 上的工具全部免费开放，不设登录墙，也不限制使用次数。