CSS Gradient Generator
0°360°
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
How to use CSS Gradient Generator
Pick a gradient type (linear, radial, conic). Add and adjust color stops. Set the angle or direction. Preview in real time. Copy the CSS code.
Features
- Linear, radial, and conic gradients
- Up to 6 color stops with position control
- Angle / direction selector
- Live fullscreen preview
- One-click CSS code copy
- 100% client-side
Frequently Asked Questions
What gradient types are supported?
Linear, radial, and conic gradients. Each can be customized with direction/angle, multiple color stops, and positioning.
Can I add more than two colors?
Yes. Add up to 6 color stops to create complex, multi-color gradients.
How do I use the generated CSS?
Click the Copy button to copy the CSS code. Paste it into your stylesheet as a background property.