Gradient Generator
Create beautiful CSS gradients with live preview.
Color Stops
0%
100%
Presets
CSS Code
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Tailwind Class
style={{ background: 'linear-gradient(90deg, #6366f1 0%, #ec4899 100%)' }}CSS Gradient Types
- Linear Gradient - Colors transition in a straight line at any angle
- Radial Gradient - Colors radiate from a center point outward
- Conic Gradient - Colors rotate around a center point (like a pie chart)
Tips for Great Gradients
- Use 2-3 colors for subtle, professional gradients
- Add more color stops for complex, vibrant effects
- Adjust positions to control color transitions
- Try different angles for unique effects