渐变生成器

CSS渐变背景在线生成工具

渐变背景生成器

°
0%
100%

CSS 代码

.gradient-bg {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}

/* Tailwind CSS */
<div className="bg-gradient-to-br from-[#3B82F6] to-[#8B5CF6]"></div>

使用说明

选择渐变类型、添加颜色断点、调整角度,生成可复制的CSS渐变代码。

使用步骤

  1. 添加颜色节点并调整位置。
  2. 选择渐变类型(线性、径向、锥形)。
  3. 调整角度和颜色节点透明度。
  4. 复制 CSS 代码。

常见问题

锥形渐变是什么?

conic-gradient() 从中心向外顺时针渐变,适合创建饼图、色轮效果。

透明度渐变如何实现?

在颜色节点中使用 rgba() 格式,设置 alpha 通道值即可实现透明渐变。

相关工具