Gradient Generator
Create linear, radial or conic CSS gradients with two or three colours, angle and position, and copy ready-to-use CSS.
Free · No upload · 100% on your device
How to use Gradient Generator
- Choose the settings in the side panel.
- The result updates instantly. Select “Update” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Gradient Generator
The CSS includes a solid fallback colour first for very old browsers. Stop positions are percentages along the gradient; moving two stops close together makes a sharper edge.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Gradient Generator: frequently asked questions
How do I make a CSS gradient?
Choose linear, radial or conic, two or three colours, the angle or position, and copy the ready-to-use CSS.
How do I make a sharp line between colours?
Move two stops close together.
Does the CSS work in old browsers?
A solid fallback colour is included first for very old browsers.
Can I add a third colour?
Yes. Turn on the middle colour and set its stop.