CSS Gradient Generator
Design beautiful CSS gradients with a live preview. Linear or radial, unlimited color stops, one-click copy.
90°
0%
100%
Presets
CSS
background: linear-gradient(90deg, #7f00ff 0%, #e100ff 100%);
What is a CSS Gradient Generator?
A visual builder for CSS linear-gradient() and radial-gradient()values. Tweak colors, positions, and angle, copy the snippet, paste into your stylesheet, no math, no guessing.
FAQs
How many color stops can I add?
As many as you like. Most designs look best with 2-4.
Will this work in every browser?
Yes! linear-gradient and radial-gradient are universally supported.
Can I use this for Tailwind?
Yes, copy the value and drop it into an arbitrary class like bg-[linear-gradient(...)].