Gradient Generator
Create CSS linear and radial gradients with a visual builder.
Color Stops
#667eea0%
#764ba2100%
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Hex colors in stops:
#667eea
#764ba2
Build stunning CSS gradients visually — choose linear, radial, or conic types, add unlimited color stops, adjust angle and positions, and copy the ready-to-use CSS.
Key Features
Gradient Types
Linear, radial and conic gradient modes with type-specific controls like angle and position.
Color Stops
Add or remove color stops with individual color pickers and position sliders.
Presets
8 handcrafted gradient presets (Sunset, Ocean, Fire, Neon and more) as starting points.
CSS Output
Generates the complete background CSS property ready to paste into your stylesheet.
How to Use
- 1Select the gradient type: Linear, Radial, or Conic.
- 2Adjust the angle slider (for Linear and Conic).
- 3Pick colors and drag position sliders for each stop.
- 4Click a preset to load it instantly.
- 5Copy the CSS output with the Copy button.