NEW
CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code.
How to Use CSS Gradient Generator
- 1Choose gradient type: Linear or Radial.
- 2For linear gradients, adjust the angle with the slider.
- 3Set the colour and position for each stop — add more stops with 'Add Stop'.
- 4Copy the generated CSS and paste it into your stylesheet.
Frequently Asked Questions
Can I have more than two colour stops?
Yes — click 'Add Stop' to insert as many stops as you need. Each stop has an independent colour and position.
What does the generated CSS look like?
It outputs a single background CSS declaration, e.g. background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
About CSS Gradient Generator
CSS gradients add depth and visual interest to backgrounds, buttons, and borders — but the syntax can be tedious to write by hand. Our CSS Gradient Generator lets you build gradients visually and copies the ready-to-use CSS in one click.