CSS 渐变生成器
创建线性或径向渐变，并将其导出为 CSS、Tailwind 或 PNG。
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
控件
Presets
0°90°180°270°360°
图像大小
编辑时有助于对齐。导出的图像始终与可见颜色匹配。
导出
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]实时预览
1920×1080
颜色停止
0%50%100%
Edit Color Stop
使用方法
- • 在时间轴上拖动颜色停止来调整位置
- • 点击停止以选择和编辑其颜色
- • 从预设调色板中选择以获得快速配色方案
- • 在控件中调整渐变角度或形状
- • 导出为 PNG 图像或复制 CSS/Tailwind 代码