CSS Gradient Generator
Runs entirely in your browser. Nothing is sent to a server.
Save this tool
Keep CSS Gradient Generator handy
Use your browser's Share menu, then “Add to Home Screen”.
Build a linear, radial or conic gradient and copy the CSS.
- Pick the kind of gradient, and the angle if it has one
- Set your colours — add more stops, or position them by hand
- Copy the CSS
About this tool
A gradient is one of those things that is quicker to build by eye than to write by hand, because the number you want is rarely the number you first guess. This shows the result as you change it and hands you the CSS underneath. All three kinds are here: linear for the usual left-to-right or top-to-bottom fade, radial for a glow spreading from the middle, and conic for the sweep around a point that colour wheels and pie charts are made of. You can add as many colour stops as you like and position each one, or leave the positions empty and let the browser space them evenly, which is what you want almost every time and keeps the value short enough to edit afterwards. Repeating mode turns any of them into a tiling pattern, which is how stripes are made in CSS without a single image. Every colour you type is parsed and written back out rather than copied through, so the value that lands on your clipboard is a colour and nothing else. The tool runs entirely in your browser.
Frequently asked questions
What is the difference between linear, radial and conic?
Linear fades along a straight line, which is the one most people mean. Radial spreads outward from a point like a glow. Conic sweeps around a point rather than outward from it, which is what makes colour wheels and pie-chart segments possible in pure CSS.
Should I set the stop positions?
Usually not. Left empty, the browser spaces the stops evenly, which is what you want most of the time and keeps the CSS short and easy to edit later. Set them by hand when you want a colour to hold longer, or when you want a hard edge between two of them.
How do I make a hard stripe instead of a fade?
Give two stops the same position. A gradient going from one colour at 50 percent to another also at 50 percent changes instantly rather than blending. Combine that with repeating mode and you have stripes with no image file at all.
Why did my colour come back as a hex code?
Every colour is parsed and rewritten rather than passed straight through. That keeps the output a valid colour and nothing else, which matters because the value ends up in a stylesheet. A colour that cannot be understood is refused rather than silently included.
Do gradients work in every browser?
Linear and radial have worked everywhere for many years. Conic is newer but supported by all current browsers. If you need to support something very old, the generator also shows a flat colour you can set first as a fallback.
Help improve this tool
Found a bug, want a change, or need a tool we don't have?
You have an unsent draft.
Thanks — that's with us. You'll find the reply in your inbox.Go to my messages