Linear · Radial · Conic
Gradient Maker
Design stunning CSS gradients with interactive color stops, 18 presets, and multi-format export including Tailwind, SVG, and CSS animations.
Click to add a stop · Drag to reposition
Export
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
--gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
bg-gradient-to-br from-[#3b82f6] to-[#8b5cf6]
Gradient Type
Color Stops
Presets
How It Works
1
Pick a Type
Choose linear, radial, or conic gradient — each creates a distinct visual effect.
2
Add Color Stops
Click the gradient bar to add stops, drag them to reposition, and edit any stop's color and opacity.
3
Fine-Tune
Adjust direction angle, radial shape and size, center position, and number of stops.
4
Export
Copy ready-to-use CSS, Tailwind classes, or CSS custom property. Download as SVG or preview with animation.