CSS gradient generator
Colours in, a declaration out.
Output
Paste or type above to see the result here.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
How it works
- Put one colour per line. Any CSS colour works — hex, rgb(), hsl(), a named colour.
- Add a position after a colour to pin it: “#000 80%”.
- Choose linear, radial or conic, and the angle or centre.
- Copy the declaration.
Frequently asked questions
- Why a flat colour first?
- It is the fallback. Anything that cannot parse the gradient — an old browser, an email client, a PDF renderer — takes the first declaration and ignores the second. Without it those readers get no background at all, which is usually worse than a plain one.
- Which way does 180deg point?
- Down. In CSS, 0deg points up and the angle goes clockwise, which is the opposite of the old -webkit- syntax and of most design tools. It is the single most common thing to get backwards here.
- Why text rather than a draggable canvas?
- Because you cannot paste a canvas into a code review. The output here is a declaration: it can be diffed, committed, and read by the next person to open the file.
- What is a conic gradient for?
- Anything that sweeps round a centre — a pie chart, a colour wheel, a loading spinner. It is the one of the three that is hard to fake with the other two.
- Is anything sent to a server?
- No. It runs in your browser, so what you type stays on your computer.