CSS Gradient Generator
Build multi-stop CSS gradients visually.
Stop 1
#3b82f6
Stop 2
#8b5cf6
Generated CSS
.box {
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
}Generate CSS Gradients
Build linear, radial, and conic CSS gradients with as many color stops as you like. Position each stop precisely, preview the result live, and copy the ready-to-use CSS â no images required.
The three types
- linear â flows along a line at an angle
- radial â radiates from a center point
- conic â sweeps around a center angle
Color stops
Each stop has a color and an optional position (0â100%). Add stops for multi-color blends, and drag positions to control exactly where each color sits.
Private & Processed Locally
The gradient CSS is generated in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the CSS Gradient Generator.
What gradient types are supported?
Linear, radial, and conic gradients with as many color stops as you like.
Can I position the color stops?
Yes, each stop has its own position from 0 to 100 percent.
Is it private?
Yes, the gradient CSS is generated in your browser.