Why does the middle of my gradient look grey?

Because interpolating between two distant hues in sRGB passes through the desaturated centre of the colour space. Add a third stop at the midpoint in a saturated colour and the dullness disappears.

How do I get a hard edge instead of a blend?

Put two stops at the same position — one colour ending exactly where the next begins. Repeating that pattern is how stripes, bands and segmented rings are built.

What is a conic gradient for?

Anything that sweeps around a centre: pie charts, progress rings, colour wheels. It is the one gradient type that makes a whole category of graphic possible without an image or a canvas.

Do gradients affect performance?

Barely. The browser paints them directly and there is no request, so they are cheaper than an image. Animating a gradient is a different matter, since it forces a repaint every frame — animate a transform or an opacity over a static gradient instead.

CSS Gradient Generator

Build a linear or radial gradient and copy the CSS.

Everything runs inside your browser. Your files never leave your device.

Result

The result appears here as you type.

Ask about CSS Gradient Generator

Questions about what this tool does, which option to pick, or what it can and cannot handle.

The question you type here is sent to an AI provider to be answered — your files and whatever you put in the tool above are not, and the assistant cannot see them. Answers are generated and can be wrong. The tool itself is not guessing: it runs deterministic code on your device.

About the CSS Gradient Generator

CSS gradients are generated by the browser rather than loaded as images, so they scale to any size, cost no requests and can be animated. The syntax is not hard, but getting a gradient to look right involves more adjustment than typing, which is what a visual builder is for.

This builds linear, radial and conic gradients with as many colour stops as you need, and emits the CSS to paste straight into a stylesheet.

The most useful thing to know about gradients is why two-stop ones between distant hues often look wrong. Interpolating from blue to yellow in sRGB passes through a desaturated grey in the middle, because the straight line between those two points in the colour cube goes through the dull centre. It is not a rendering fault; it is what a linear blend between those coordinates is. The fix is a third stop at the midpoint, in a colour that keeps the saturation up — and once you see the effect you will notice it in a great many gradients on the web.

Conic gradients are the least used and the most distinctive. Colour sweeps around a centre point rather than along a line, which makes pie charts, progress rings and colour wheels possible in pure CSS with no library and no canvas.

Two practical notes. Multiple stops of the same colour at the same position produce a hard edge rather than a blend, which is how to build stripes and colour bands. And a gradient behind text needs the same contrast check as a flat colour — against the lightest point if the text is dark, and the darkest point if the text is light, because the readable ratio must hold across the whole run rather than on average.

How to use it

1Choose the gradient type — linear for a direction, radial for a centre, conic for a sweep.
2Add colour stops and drag them until the blend reads the way you want.
3Add a stop in the middle if a two-colour gradient looks washed out through the centre.
4Copy the CSS, then check contrast against the extremes of the gradient if text will sit on top of it.

Questions

Why does the middle of my gradient look grey?: Because interpolating between two distant hues in sRGB passes through the desaturated centre of the colour space. Add a third stop at the midpoint in a saturated colour and the dullness disappears.
How do I get a hard edge instead of a blend?: Put two stops at the same position — one colour ending exactly where the next begins. Repeating that pattern is how stripes, bands and segmented rings are built.
What is a conic gradient for?: Anything that sweeps around a centre: pie charts, progress rings, colour wheels. It is the one gradient type that makes a whole category of graphic possible without an image or a canvas.
Do gradients affect performance?: Barely. The browser paints them directly and there is no request, so they are cheaper than an image. Animating a gradient is a different matter, since it forces a repaint every frame — animate a transform or an opacity over a static gradient instead.