CSS Gradient Generator
Create beautiful CSS gradients with advanced controls and real-time preview
Gradient Type
Choose between linear and radial gradients
Direction
Set the angle of the linear gradient
90°
Color Stops
Add and configure gradient color stops
Color Stop 1
Color Stop 2
Recent Colors
Click to use in your gradient
Live Preview
Real-time gradient preview
Generated CSS
Cross-browser compatible CSS code
Keyboard Shortcuts
Copy CSSCtrl + C
Add Color StopCtrl + +
Toggle Gradient TypeCtrl + T
Reset GradientCtrl + R