🎨 CSS Gradient Generator
Create beautiful CSS gradients with a visual builder. Copy-ready code for your projects.
Type
Angle
135°
Shape
Position
Color Stops
CSS Code
Preset Gradients
How It Works
- Linear gradients transition colors along a straight line at the specified angle
- Radial gradients radiate from a center point outward in a circle or ellipse shape
- Conic gradients rotate colors around a center point like a color wheel
- Add up to 6 color stops and adjust their positions to fine-tune the gradient
- Click any preset to load it, then customize the colors and settings to your liking
- Use the full-screen preview to see how the gradient looks at scale