Gradient Maker
Build linear, radial and conic CSS gradients with a live preview. Add as many colour stops as you need and copy the CSS. Runs entirely in your browser.
Stops
Drag a handle to move a stop. Click the bar to add one, double-click a handle to remove it. Arrow keys nudge a selected handle; hold Shift for larger steps.
Direction
Selected colour
Drag a handle on the bar above to choose which stop these sliders edit.
Colour stops
Start from a preset
Related tools
All Colour tools →This tool runs entirely in your browser. Nothing you enter is sent to our servers, so there is nothing for us to store or see.
About the Gradient Maker
Build a CSS gradient and watch it update as you work. Choose linear, radial or conic, set the angle, and add as many colour stops as you need — the preview is the real thing, drawn by the same browser engine that will render it on your site, so what you see is exactly what you will get.
Every gradient here is a single CSS declaration with no image, no library and no extra request. That is worth caring about: a background gradient shipped as a PNG is typically 20 to 200 KB and blurs on a high-density screen, while the same gradient in CSS is a hundred bytes and stays perfectly sharp at any size or zoom level.
Adding a stop inserts it into the widest gap, coloured as the exact midpoint of its neighbours — so the gradient does not visibly change until you move it. That is deliberate: a new stop should be somewhere to start refining from, not a sudden band of an unrelated colour. Stops can be dragged anywhere between 0 and 100 percent and are sorted as you release them.
The three gradient types do genuinely different things. Linear runs along a straight line at whatever angle you set, and is what most page backgrounds and buttons use. Radial spreads outward from the centre, which suits spotlights and soft vignettes. Conic sweeps around the centre like a clock face — it is what makes pie charts, colour wheels and progress rings possible in pure CSS.
How to use the Gradient Maker
-
Choose a gradient type
Linear runs along a straight line, radial spreads from the centre, and conic sweeps around it. The controls change to match — an angle for linear and conic, a shape for radial.
-
Set your colours
It opens on three stops. Select one on the bar, then tune it with the red, green, blue and opacity sliders — or type a hex code straight into its row, including the eight-digit form for a see-through colour. Drag a stop's position slider to move it along the gradient, and Add a stop puts a new one in the widest gap, coloured midway between its neighbours.
-
Adjust the angle
Drag the angle slider to rotate a linear or conic gradient. Zero degrees runs bottom to top, and it turns clockwise from there.
-
Copy the CSS
One declaration, updating as you work. Copy it and paste it straight into your stylesheet — no image and no extra request.
Frequently asked questions
Is anything I make here sent to a server?
No. The whole tool runs in your browser, and the preview is drawn by the same rendering engine that will draw the gradient on your own site. Nothing is uploaded, nothing is saved, and you can disconnect from the internet once the page has loaded and carry on using it.
Why use a CSS gradient instead of an image?
Size and sharpness. A background gradient exported as a PNG is usually 20 to 200 KB and needs its own network request, and it goes soft on a high-density screen because it is a fixed grid of pixels. The same gradient in CSS is around a hundred bytes, needs no request at all, and stays perfectly smooth at any size or zoom level.
How many colour stops can I add?
As many as you like, though gradients with more than four or five stops tend to look busy rather than rich. Two stops is the minimum, since a gradient with one colour is just a solid fill. The remove button is disabled once you are down to two.
What does a conic gradient do that the others cannot?
It sweeps colour around a centre point rather than along a line or outward from a point, which is what makes pie charts, colour wheels and progress rings possible in pure CSS with no images or JavaScript. Every browser in current use supports it.
Why does adding a stop not change how the gradient looks?
Because the new stop is given the exact colour that was already being drawn at that position — the midpoint of its two neighbours. That is intentional: a new stop should be a place to start adjusting from, not a sudden band of an unrelated colour you then have to correct.
Can I use transparency in a gradient?
Yes. Select a stop and drag the opacity slider, or type an eight-digit hex code into its row. The chequerboard behind the preview is what tells you a colour is genuinely see-through rather than fading to white, and a partly transparent stop is written into the CSS as rgba() rather than hex. Fading a gradient to transparent instead of to white is the usual way to overlay one on a photograph.