CSS 渐变生成器
颜色
可视化设计线性或径向 CSS 渐变：选择类型，调整角度或形状，添加任意数量的颜色停靠点，实时预览。结果可复制为普通 CSS 规则或 Tailwind 任意值类。
—
类型
颜色停靠点
- 0%
- 100%
预览
CSS
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
Tailwind
bg-[linear-gradient(135deg,_#3b82f6_0%,_#8b5cf6_100%)]
使用方法
- 选择线性或径向。
- 调整角度（线性）或形状（径向）。
- 编辑颜色停靠点，拖动位置滑块。
- 复制 CSS 规则或 Tailwind 类。
常见问题
- 为什么用 Tailwind 任意值？
- bg-[…] 任意值类让你不写额外 CSS 即可在 Tailwind 项目中应用自定义渐变。
- 可以添加多少颜色停靠点？
- 任意数量——通常 3 到 5 个最好看，但没有上限。
- 渐变会保存吗？
- 上次的设计会自动保存到浏览器本地存储，下次打开自动恢复。
- Tailwind 类里为何有下划线？
- Tailwind 把空白视为类分隔符，所以任意值用下划线代替空格。