Gradient Generator
Create beautiful CSS gradients with live preview. Linear or radial, custom stops, one-click copy.
Presets
CSS Code
Random
Type
Angle
135°
Presets
CSS Code
Features
Linear & Radial
Switch between linear gradients with angle control and radial gradients.
Custom Color Stops
Add up to 6 color stops with individual position sliders for precise control.
Beautiful Presets
12 curated gradient presets to use as-is or as a starting point.
One-Click CSS Copy
Copy production-ready CSS code to your clipboard instantly.
Pro Tips
- ●Use
background-sizeto create repeating gradient patterns. - ●Radial gradients are great for spotlight effects and button highlights.
- ●Click “Random” to discover unexpected color combinations.