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.
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
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.
How to create a CSS gradient
Pick two or more colours, choose a linear or radial style and set the angle, and the generator builds the gradient with a live preview. Copy the ready-made CSS straight into your stylesheet. It takes the guesswork out of writing gradient syntax by hand and lets you experiment until it looks right.
Why use gradients in design?
Gradients add depth and a modern, polished feel to backgrounds, buttons and hero sections without needing image files, so they load instantly and scale to any screen. A well-chosen gradient can define a brand's look. The CSS is generated in your browser, ready to paste into your project.
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.