CSS渐变生成器在线工具

通过实时色标设计线性、径向和圆锥CSS渐变，并复制代码，全部在浏览器中完成。

CSS渐变生成器完全在你的浏览器中运行。你设计的颜色和渐变设置永远不会上传到ArrayKit。

打开CSS颜色转换器

关于 CSS渐变生成器

CSS渐变生成器以可视化方式设计线性、径向和圆锥渐变，让你无需再手动调整background-image的值。选择渐变类型，拖动角度滑块或中心位置，然后使用原生颜色选择器和精确的百分比位置，添加、删除或重新着色任意数量的色标。编辑时实时预览面板会立即更新，工具会生成可直接复制的 `background: ...;` 声明，供你直接粘贴到样式表中。它专为想要在不打开设计软件的情况下试做横幅、按钮或卡片背景的前端开发者和设计师而打造。所有处理都在浏览器本地完成，你创建的渐变绝不会被上传到任何地方。

功能特性

如何使用 CSS渐变生成器

  1. 选择渐变类型：线性、径向或圆锥
  2. 设置角度（线性/圆锥）或形状与中心位置（径向）
  3. 添加色标并调整每个色标的颜色和百分比位置
  4. 从代码面板复制生成的background CSS

示例

输入

linear, 90deg, red -> blue

输出

background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

一个从红色到蓝色、角度为90度的两色标线性渐变。

常见错误与故障排除

常见问题

什么是CSS渐变生成器？
这是一款可视化工具，可根据色标创建线性、径向和圆锥CSS渐变，提供实时预览和可直接复制的background声明——无需手写渐变语法。
CSS渐变生成器除了线性渐变，还能创建径向和圆锥渐变吗？
可以。将分段控件切换为“径向”，即可创建带可拖动中心的圆形或椭圆形渐变；切换为“圆锥”，则可创建从选定起始角度绕中心扫过的渐变。
在渐变工具中我可以添加多少个色标？
数量不限。使用“添加色标”按钮新增一个色标，使用每一行的删除按钮移除色标，只要至少保留一个色标即可。
CSS渐变生成器会把我的颜色上传到什么地方吗？
不会。CSS渐变生成器完全在你的浏览器中运行，你设计的颜色、位置和渐变永远不会离开你的设备。
渐变生成器输出的是什么CSS？
一条单独的background声明，例如 background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);，可直接粘贴到样式表、style属性或CSS-in-JS模板中。
我可以为径向或圆锥渐变的中心设置精确位置吗？
可以。Center X和Center Y滑块可让你在每个方向上将渐变原点移动到元素的0%到100%之间的任意位置。

相关工具

全部 ArrayKit 工具