🌈 Advanced CSS Gradient Generator
Generate complex CSS gradients with multiple color stops, angles, and types — all in your browser, instant results.
90°
About the CSS Gradient Generator
This tool builds CSS gradients visually. Choose linear, radial, or conic gradients, add as many color stops as you like, set positions and angles, and copy the generated CSS straight into your project. Everything updates live as you edit.
Gradient types
- Linear — Colors blend along a straight line at the chosen angle.
- Radial — Colors radiate outward from the center.
- Conic — Colors sweep around a central point like a pie.
How to use
- Pick a gradient type.
- For linear, drag the angle slider to rotate the direction.
- Click a stop's color box to change its color, drag the position slider to move it.
- Click Add Stop for more colors, or the × on a stop to remove it.
- Click Copy CSS to copy the generated
backgrounddeclaration.
Frequently asked questions
What CSS does it output? A single background: ...gradient(...); declaration ready to paste into any stylesheet or inline style.
Are color stops sorted? Yes — stops are sorted by position before generating, so the gradient always renders cleanly.
Does it support transparency? You can use hex colors; for full alpha control, edit the pasted CSS to use rgba() values.