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 程式碼