Gradient Generator
免费 CSS 渐变生成器。创建最多 3 种颜色的线性渐变和径向渐变。调整角度、实时预览并复制 CSS 代码。非常适合网页设计师。
90°
CSS
background: linear-gradient(90deg, #6366f1, #ec4899);关于Gradient Generator
Gradient Generator完全在您的浏览器中运行。您的数据保留在您的设备上——不会上传到任何服务器。
免费 CSS 渐变生成器。创建最多 3 种颜色的线性渐变和径向渐变。调整角度、实时预览并复制 CSS 代码。非常适合网页设计师。 免费, 无需注册, 隐私优先.
如何使用Gradient Generator
使用可视化编辑器创建 CSS 渐变。构建线性、径向和锥形渐变，并即时复制 CSS 代码。
- 1
选择渐变类型
选择线性、径向或锥形以匹配您想要的设计外观。
- 2
选择颜色
添加色标并拖动它们以设置位置。调整线性渐变的角度。
- 3
预览渐变
在调整颜色、位置和角度时实时观看预览更新。
- 4
复制 CSS
点击复制按钮将生成的 CSS 渐变代码复制到剪贴板，随时粘贴到样式表中。
提示
- •使用两到三种颜色来创建干净、现代的渐变——太多颜色会显得浑浊。
- •在 0% 和 100% 处添加色标以实现完全覆盖，或留出间隙以创建带状效果。
- •135 度的线性渐变通常比默认的 90 度看起来更有动感。
更多Generators工具
常见问题
渐变生成器是免费的吗？
是的，我们的渐变生成器完全免费，无需注册。您可以创建无限量的 CSS 渐变并即时复制代码。
支持哪些类型的渐变？
我们支持可调角度的线性渐变和可自定义形状和位置的径向渐变。您可以添加多个色标以实现复杂效果。
我可以复制 CSS 代码吗？
是的。生成的 CSS 显示在代码框中。点击复制即可获得可直接粘贴到样式表中的 background 属性。
渐变生成器可以离线使用吗？
是的。所有生成都在浏览器中完成，页面加载后无需网络连接即可使用。