CSS Gradient Generator
Set the colours and angle, preview the result at full size, and copy the exact CSS — including multi-stop gradients that are tedious to write by hand.
Loading this tool…
Nothing you enter here is sent anywhere. There is no file and no request to our server - the work is done in your browser and disappears when you close the page.
How It Works
- Enter — Fill in the values the tool asks for.
- Run — Press the button; an empty field is reported by name rather than read as zero.
- Read — The answer comes with the working behind it, so you can check the figure.
- Take it — Copy the result, or download it where the tool offers that.
Frequently Asked Questions
Do I still need vendor prefixes?
Modern browsers support unprefixed linear- and radial-gradient. The generator offers the -webkit- form only if you deliberately need very old engines.