🌈 Gradient Generator
Create stunning CSS linear and radial gradients with multiple color stops.
🎨 Gradient Editor
💻 Generated Code
✨ Quick Examples:
Sunset Linear
Ocean Radial
Stripe Effect
Tropical Linear
Gradient Properties
Gradient Type:
Linear Gradient
Radial Gradient
Angle / Direction:
To Bottom (0deg)
To Right (90deg)
To Top (180deg)
To Left (270deg)
To Bottom Right (45deg)
To Top Left (225deg)
45 degrees
90 degrees
135 degrees
180 degrees
225 degrees
270 degrees
315 degrees
Shape:
Ellipse (Default)
Circle
Size:
Farthest Corner (Default)
Closest Side
Closest Corner
Farthest Side
50% 50% (explicit)
300px 200px (explicit)
Position (e.g., at center, at 20% 80%):
Color Stops
+ Add Color Stop
🎨 Live Gradient Preview
Generated HTML & CSS Code
📋 Copy Code
🔄 Reset All
Code copied to clipboard! ✅