CSS Gradient Generator
Design linear, radial, and conic CSS gradients with up to five color stops, a live preview, and copy-ready background-image code.
Processed locally in your browser — nothing is uploaded.
Color stops (2–5)
0%
100%
Preview
CSS
background-image: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);
About CSS Gradient Generator
Pick a gradient type, add two to five color stops, and drag each stop's position slider while the preview updates live. Linear gradients get an angle control; conic gradients get a starting angle.
The output is a single copy-ready background-image declaration — no vendor prefixes needed in any current browser.
Common uses
- Build a hero-section background without hand-tuning stop percentages
- Recreate a design mockup's gradient in CSS
- Experiment with conic gradients for pie-chart-style effects
Example
Input
Linear · 90° · #2563eb at 0%, #9333ea at 100%
Output
background-image: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);