Gradient Generator
Build beautiful CSS gradients visually — linear or radial, with custom colors, stops and angle. Copy the ready-to-use CSS in one click. Free, in your browser.
#2563eb0%
#7c3aed100%
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
25 gradients
Drag the sliders to set each color’s position; add up to 6 stops.
Paste the copied CSS straight into your stylesheet — it’s a standard background declaration.
Related Tools
Frequently Asked Questions
How do I create a CSS gradient?
Choose linear or radial, pick your colors and stops, set the angle, then copy the ready-to-use CSS background declaration.
How many colors can a gradient have?
Up to six color stops, each with its own position, so you can build simple two-tone or rich multi-color gradients.
Can I share a gradient I made?
Yes. The Share button copies a link that reopens the tool with your exact gradient restored.
Is the gradient generator free?
Yes, completely free with no sign-up — just build, copy the CSS, and paste it into your stylesheet.