CSS Gradient Generator
Create beautiful CSS gradients with live preview. Linear and radial gradients with multiple color stops.
0° (→)90° (↓)180° (←)270° (↑)
Color Stops
Position: 0%#ff0000
Position: 100%#0000ff
Presets
Preview
CSS Code
Alternative Formats
Background Image (for overlays)
💡 CSS Gradient Tips
- • Linear gradients: 0° = left to right, 90° = top to bottom, 180° = right to left
- • Add multiple color stops for complex gradients
- • Use radial gradients for spotlight effects
- • Combine with background-image for layered effects
- • Use opacity in colors (rgba) for transparent gradients
About CSS Gradient Generator
Visual gradient generator with real-time preview. Create linear and radial gradients with unlimited color stops. Adjust angle, direction, and color positions. Supports opacity for each color. Copy CSS code for background or background-image. Perfect for modern web designs.
All processing happens entirely in your browser using modern web APIs. Nothing is uploaded to our servers — your data stays local. Free forever for everyone, with a Pro plan for power users who want an ad-free experience and API access.