Gradient Generator
Gradient Generator - a browser-based image tools utility.
Browser tool
About Gradient Generator
Build a gradient by placing colour stops and dragging them until it looks right, then take the result away as an asset. If you want the CSS rule instead of an image, the CSS Gradient Generator produces the same gradient as a stylesheet declaration. Building one is free and entirely online. No account, no sign up, and no watermark stamped across the result — and since the gradient is drawn in your browser, nothing is uploaded.
How to use it
- Add and position colour stopsTwo will do for most things. A stop fixes one colour at one point on the axis, and moving it repaints the preview as you drag.
- Choose linear or radialLinear runs along an angle you set; radial spreads from a centre point. The same stops behave quite differently between the two, so it is worth trying both.
- Export itTake the gradient away in the form you need for the surface it is going on.
Why a two-stop gradient can look muddy
Interpolating directly between two saturated colours passes through the desaturated middle of the colour space, which is where grey lives. Blue to yellow goes through a dull green rather than a bright one. Adding a third stop at the midpoint, in the colour you actually want there, is the usual fix.
What it does not do
- Banding shows up on large, subtle gradients, particularly on displays with limited colour depth. More stops do not fix it; a little noise over the top does.
- A gradient is not a substitute for an image. Anything with detail belongs in a picture file.
Questions people ask
- How do I stop my gradient looking grey in the middle?
- Put an extra stop halfway along, set to the colour you actually want to see there. Left to itself the blend travels through the washed-out middle of the colour space, and the extra stop forces a better route.
- Should I use this or the CSS gradient generator?
- This one when you want an asset to place. The CSS version when you want a rule to paste into a stylesheet, where the browser paints the gradient at whatever size the element happens to be.
Questions about ToolsVerse itself — privacy, cost, what happens to your files — are answered in the frequently asked questions.
Related tools
The tools people most often need alongside Gradient Generator.
Can’t find the tool you need?
Tell us what you’re looking for and we’ll consider adding it.