免费在线 CSS 渐变生成器 tool icon
CSS • linear-gradient • radial-gradient

免费在线 CSS 渐变生成器

免费在线 CSS 渐变生成器:可视化编辑线性/径向渐变,生成可复制的 background CSS 代码。

预览
CSS
颜色节点

如何使用 CSS 渐变生成器

  • 选择渐变类型(线性或径向)。
  • 如果是线性渐变,调整角度。
  • 使用“添加节点”增加颜色节点,或点击现有节点进行编辑/删除。
  • 点击“随机”按钮生成随机渐变。
  • 在右侧预览区实时查看效果。
  • 点击“复制”按钮获取生成的 CSS 代码。

小贴士

  • 线性渐变(Linear Gradient)沿直线进行颜色过渡。
  • 径向渐变(Radial Gradient)从中心向外辐射颜色。
  • 所有生成都在本地浏览器完成,无需上传数据。