CSS Gradient Generator
Design linear and radial CSS gradients with multiple color stops and angle control, preview them live and copy the CSS.
This tool runs entirely in your browser.
Loading tool…
How to use the CSS Gradient Generator
- 1Choose linear or radial.
- 2Adjust the angle and the colors and positions of each stop; add up to 6 stops.
- 3Copy the generated CSS.
What is the CSS Gradient Generator?
CSS gradients are generated by the browser, so they scale to any size without images and add no download weight.
Frequently asked questions
Do gradients work in all browsers?
Yes — linear-gradient() and radial-gradient() are supported in every modern browser without prefixes.
Is the CSS Gradient Generator free and private?
Yes. The CSS Gradient Generator is free, needs no account, and runs entirely in your browser. What you type is never sent to a server or stored.