渐变生成器
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渐变代码。
使用步骤
- 添加颜色节点并调整位置。
- 选择渐变类型(线性、径向、锥形)。
- 调整角度和颜色节点透明度。
- 复制 CSS 代码。
常见问题
锥形渐变是什么?
conic-gradient() 从中心向外顺时针渐变,适合创建饼图、色轮效果。
透明度渐变如何实现?
在颜色节点中使用 rgba() 格式,设置 alpha 通道值即可实现透明渐变。