CSS Gradient Generator (Linear & Radial) | Free Online Tool
Create linear or radial CSS gradients and export as CSS, Tailwind, or PNG. Fast preview, copy-paste snippets, and ready backgrounds for UI and web.
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.
Controls
Presets
0°90°180°270°360°
Image Size
Helpful for alignment while editing. Exported images always match the visible colors.
Export
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]Live Preview
1920×1080
Color Stops
0%50%100%
Edit Color Stop
How to Use
- • Drag color stops on the timeline to adjust positions
- • Click stops to select and edit their colors
- • Choose from preset palettes for quick color schemes
- • Adjust gradient angle or shape in Controls
- • Export as PNG image or copy CSS/Tailwind code