CSS gradient generator
Colours in, a declaration out.
Examples temporarily replace the input and settings. You can restore your previous work.
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.
Example
Example: four gradients for a fundraising page, from the colours typed to the CSS
A developer building a school fundraising page needs a header band, a progress ring showing 65 % of the target raised, a dark shade under the caption on a photo and a striped “closing soon” banner. Each is one run: colours one per line, then the kind and the angle.
- Header: #1e3a8a and #0d9488, Linear, angle 135. 135deg points to the bottom right, so the navy starts in the top-left corner and the teal ends in the bottom right.
- Ring: #16a34a 65% and #e5e7eb 65%, Conic, angle 0, Centre. Two colours at one position meet at a hard edge: green from 12 o’clock clockwise to 65 %, grey for the rest.
- Caption shade: rgba(0, 0, 0, 0.6) and rgba(0, 0, 0, 0) 60%, Linear, angle 0. 0deg points up: dark at the bottom, clear by 60 % of the height. Commas inside the brackets do not split the line.
- Every result starts with background: and the first colour alone, the fallback for anything that cannot read the gradient.
| For | Lines typed | Settings | Declaration |
|---|---|---|---|
| Header band | #1e3a8a / #0d9488 | Linear, 135 | linear-gradient(135deg, #1e3a8a, #0d9488) |
| Progress ring | #16a34a 65% / #e5e7eb 65% | Conic, 0, Centre | conic-gradient(from 0deg at center, #16a34a 65%, #e5e7eb 65%) |
| Caption shade | rgba(0, 0, 0, 0.6) / rgba(0, 0, 0, 0) 60% | Linear, 0 | linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 60%) |
| Banner stripes | #f59e0b 0px / #f59e0b 10px / #1f2937 10px / #1f2937 20px | Linear, 45, Repeating | repeating-linear-gradient(45deg, #f59e0b 0px, #f59e0b 10px, #1f2937 10px, #1f2937 20px) |
Four pairs of lines to paste, such as background: #1e3a8a; followed by background: linear-gradient(135deg, #1e3a8a, #0d9488); — plus the same gradient as a background-image line. A single colour on its own gets no CSS, only the note that a gradient needs at least two colours.
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.
- How do I get hard stripes or a pie slice instead of a blend?
- Give two colours the same position: “#16a34a 65%” followed by “#e5e7eb 65%” switches from green to grey at 65 % with no fade. Turn on Repeating with positions in px, such as 0px, 10px, 10px, 20px, and the pattern repeats as stripes.
- Can a gradient fade to transparent?
- Yes. Any CSS colour works, so end on the same colour with zero alpha, for example rgba(0, 0, 0, 0.6) to rgba(0, 0, 0, 0): a shade that darkens the bottom of a photo under white text. Commas inside rgba() stay part of the colour.
- Is anything sent to a server?
- No. It runs in your browser, so what you type stays on your computer.