Type
Colour stops
Presets
The preview is your own browser painting the CSS, nothing is rendered or stored remotely.
How it works
CSS gradient generator with live preview and copy-ready CSS
Build a CSS gradient from as many colour stops as you want, and copy the single background declaration. Radial and conic types sit at 50% 50%.
What this does
- Linear and conic gradients take an angle from 0 to 360 degrees; radial ones take a circle or an ellipse
- Add stops without limit and place each one by slider or by typing a percentage
- Six presets to start from, including a five-stop conic colour wheel
- The output is one line, background: linear-gradient(…), with a copy button beside it
FAQ
Keep going
