CSS Gradient Generator

Design linear, radial, and conic CSS gradients with a live preview. Add color stops, fine-tune positions, and copy the generated CSS instantly.

CSS Gradient Generator

Pick a gradient type, add color stops, and preview the result in real time.

Gradient Type
Color Stops
0%
100%
Presets
Generated CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);