CSS gradient generator
Build a linear, radial or conic gradient, add colour stops, and copy the background-image rule. Repeating gradients use the same stops.
- Linear, radial, conic
- Free, no sign-up
Runs in your browser. Nothing you type or open is uploaded. Free to use, no account. More code and data tools
How to use it
- Choose linear, radial or conic, or start from a preset.
- Set the angle, the shape and the colour stops.
- Copy the CSS.
Stops, angle and the CSS rule
A linear gradient takes an angle in degrees. A radial gradient takes a circle or an ellipse and a position such as centre. A conic gradient takes an angle and a position. Each stop is a colour and a position from 0 to 100. Two stops are the minimum, and Add a stop inserts another.
The preview paints the same background-image the box copies. Repeating uses repeating-linear-gradient, repeating-radial-gradient or repeating-conic-gradient. The type, the angle and the first two colours can be shared in the page link.
Private by design
Privacy
Everything runs in this page and stays on your device. Text you paste stays in this tab. Choices such as a format or a font size can be shared in the page link.
This page also shows Google ads, which can use cookies. Privacy and cookies explains how.
Questions
Which gradients can I build?
Linear, radial and conic, each as a single gradient or a repeating one.
What does the copied CSS contain?
A background-image rule with the gradient function, the angle or shape, and the colour stops.
How many stops can I use?
Two stops are the minimum. Add a stop inserts another colour, and Remove takes one away while two remain.
Can I share a gradient?
The type, the angle and the first two colours can travel in the page link. Extra stops stay in this tab.