YUCTS Tools

CSS 渐变生成器（线性、径向）

编辑线性或径向渐变的色标和角度，实时预览效果，并复制 CSS 的 background 代码。

  • 在浏览器内处理（不上传）
渐变类型

0deg 从下到上、90deg 从左到右、180deg 从上到下变化（0～360）。

色标（color stop）

可设置 2～10 个。CSS 会按位置从小到大输出。

  1. 色标 1

  2. 色标 2

  3. 色标 3

结果

预览

生成的 CSS

background: #4158d0;
background: linear-gradient(90deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);

使用方法

  1. 选择线性或径向，再设置角度，或形状和中心位置。
  2. 编辑每个色标的颜色（#RRGGBB 等）和位置（0～100%）。点击“添加色标”可增加，点击 × 可删除。
  3. 确认预览后，点击“复制 CSS”粘贴到样式表中使用。

常见问题

角度 0deg 和 90deg 是哪个方向？

在 CSS 的 linear-gradient 中，0deg 从下到上（to top），90deg 从左到右（to right），180deg 从上到下（to bottom）。

两个色标放在同一位置会怎样？

颜色不会渐变，而是在该位置直接切换，形成清晰的分界，可用来制作条纹。

为什么会输出两行 background？

第一行是纯色的备用（fallback）设置，在不支持渐变的环境中仍会显示第一个颜色。

可以使用颜色名称（如 red）或 rgb() 吗？

为了安全，只接受十六进制色值（#RGB、#RGBA、#RRGGBB、#RRGGBBAA），其他文字一律不会写入 CSS。

注意事项与限制

  • 你输入的内容只在本页面处理，不会发送到 YUCTS 的服务器。
  • 只支持十六进制色值，不能使用颜色名称、rgb()、hsl() 或 transparent 等关键字（需要透明时，请用 #RRGGBBAA 的最后两位指定）。
  • 不支持锥形渐变（conic-gradient）、重复渐变（repeating-）和颜色插值方式的设置。
  • 预览是你当前浏览器的显示效果；较旧的浏览器可能无法显示 8 位色值（#RRGGBBAA）。