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.

Can I download a gradient as a PNG image?

Yes. Choose an artwork size such as 1920 x 1080, 4K or a custom size up to 8192 px, set the image format to PNG, and download it. Linear and radial gradients can also be saved as SVG, and the CSS value can be copied.

Gradient Generator

Build a linear, radial or conic gradient from hex colour stops, then export it as a PNG or JPG up to 8192 px, or copy the CSS value; linear and radial also save as SVG.

Browser tool

Export

1,920 × 1,080 px · rendered on your device

File name

.png / .svg

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 Gradient Generator

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.