CSS Gradient Generator — build gradients in your browser
Design a gradient visually and copy the CSS in one click.
This tool runs entirely in your browser. Your files are never uploaded — they stay on your device.
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);Hand-writing gradient syntax is fiddly — one wrong percentage or a forgotten unit and the whole background falls flat. This generator lets you build the gradient visually: add as many color stops as you like, drag their positions, switch between linear and radial, and watch the preview update instantly.
Everything runs in your browser. There is no sign-up, no server round-trip and nothing to install — the CSS is generated on your device the moment you change a setting, ready to copy straight into your stylesheet.
How to use CSS Gradient Generator
- Choose a gradient type — linear or radial.
- For a linear gradient, set the angle in degrees.
- Adjust each color stop with the color picker and its position slider.
- Add or remove stops until the preview looks right.
- Click “Copy CSS” to copy the generated background rule.
Frequently asked questions
What CSS does this generate?
It outputs a single background property using the standard linear-gradient() or radial-gradient() function, so you can paste it directly into any stylesheet or inline style.
How many color stops can I add?
As many as you need. Every stop has its own color and position, and the gradient updates live as you add, edit or remove them.
Does the angle apply to radial gradients?
No. The angle only affects linear gradients. Radial gradients spread outward from the center, so the angle control is hidden when radial is selected.
Is anything sent to a server?
No. The tool runs entirely in your browser. Your colors and the generated CSS never leave your device.