CSS Gradient Generator
Create beautiful CSS gradients with ease
Gradient Type
Linear Gradient
Radial Gradient
Angle (degrees)
Shape
Circle
Ellipse
Color Stops
%
%
Add Color Stop
background: linear-gradient(90deg, #4a90e2 0%, #2ecc71 100%);
Copy
Documentation
Features
Generate linear and radial gradients
Customize gradient angle
Add multiple color stops
Real-time preview
Copy CSS code with one click
Adjust color stop positions
Choose between circle and ellipse shapes for radial gradients
How to Use
Select gradient type (linear or radial)
For linear gradients, adjust the angle using the slider or input
For radial gradients, choose the shape (circle or ellipse)
Add color stops using the color picker and position inputs
Click "Add Color Stop" to add more colors to your gradient
Preview updates automatically as you make changes
Click "Copy" to copy the CSS code to your clipboard
Tips
Use at least two color stops for a basic gradient
Position values are in percentages (0-100)
Colors can be adjusted using the color picker or by entering hex values
The preview box shows exactly how your gradient will look