CSS gradient generator
Runs in this tab. Nothing is uploaded.
CSS
How to use this tool
Design a CSS background gradient and copy the code. Nothing is uploaded.
Pick a type or preset
Start from a preset or Random, then choose linear, radial or conic and set the angle or shape.
Set the colours
Change each colour and drag its position. Add up to six colours; × removes one.
Copy the CSS
Press Copy CSS and paste it into your stylesheet, or choose a size and Save PNG for a wallpaper.
FAQ
How do I make a CSS gradient?
Pick a type (linear, radial or conic), set the colours and their positions, and adjust the angle or shape. The CSS updates as you go; press Copy CSS.
What is a colour stop?
A colour at a position along the gradient, from 0% to 100%. Add up to six stops; the gradient blends between them in order of position.
Why are there two background lines?
The first line is a solid colour for very old browsers; the second is the gradient. Every current browser uses the gradient.
Can I save the gradient as an image?
Yes. Choose a size (desktop, phone, 1440p or square) and press Save PNG. It is drawn in your browser.
Linear, radial or conic?
Linear blends along a line at an angle (90° is left to right). Radial spreads from the centre as a circle or ellipse. Conic sweeps around the centre like a colour wheel.