Designer / CSS
CSS Gradient Generator
Build linear and radial gradients visually, fine-tune color stops, and copy production-ready CSS instantly. Shape gradients visually, tune color stops, and copy production-ready CSS without leaving the browser.
linear
Type
135deg
Mode
3
Color stops
Live
CSS state
Stop 1
#2563eb 0%
Stop 2
#7c3aed 48%
Stop 3
#ec4899 100%
Status
Loaded starter gradient
Live preview
Gradient surface
Test how the gradient feels behind interface content, hero treatments, or visual accents before copying the CSS.
CSS output
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 48%, #ec4899 100%);
Saved gradients
Save a gradient to build your own small library of reusable styles.
Stop timeline
#2563eb
0%
#7c3aed
48%
#ec4899
100%