CSS Gradient Generator
Build linear and radial gradients visually — pick colors, adjust the angle, add stops — and copy production-ready CSS with one click. See your gradient on a live full-size preview.
CSS
background: linear-gradient(135deg, #5E6AD2, #10B981);How to use
- Pick two (or three) colors for your gradient.
- Choose linear or radial and adjust the angle.
- Copy the generated CSS into your stylesheet.
Frequently asked questions
Yes — the output is standard CSS supported by every modern browser, ready for backgrounds, buttons and hero sections.
Hit the Shuffle button for instant color combinations until something catches your eye.