Home›Colors Tools›CSS Gradient Generator

Free CSS Gradient Generator

Linear, radial and conic gradients with a live preview and copy-ready CSS.

Pick two or three colours, choose a direction, and the CSS appears below the preview ready to paste. Everything updates as you adjust it, so you can judge the result rather than imagine it. No account, no export step, and nothing leaves your browser.

How it works

1

Choose colours

Two by default, or add a third stop.

2

Set type and angle

Linear, radial or conic — preview follows live.

3

Copy the CSS

One declaration, ready for your stylesheet.

Related Tools

🎨

Colour Tools

HEX, RGB, HSL and contrast

 🖥️

CSS Units

px to rem, em, vw and vh

 📐

SVG to PNG

Rasterise a vector

 📜

JSON Formatter

Validate and beautify JSON

Which gradient type does what

Linear blends along a straight line, and the angle sets its direction. In CSS the angle points toward where the gradient ends: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. This trips people up because it is measured clockwise from north, unlike the mathematical convention.

Radial spreads outward from a centre point in ellipses, which suits spotlights, soft vignettes and giving a flat surface a sense of depth.

Conic sweeps around a centre like a clock hand rather than outward. It is what you need for pie charts, colour wheels and the gradient rings common in modern interfaces — effects that previously required an image or SVG.

Making gradients that look good rather than muddy

The most common problem is a grey band in the middle. It happens when you blend between two colours that sit opposite each other on the colour wheel — blue to orange, for example. The interpolation passes through the desaturated centre, and the midpoint turns to mud.

Two fixes work. Keep your colours within a similar region of the wheel, so the path between them stays saturated: blue to purple, orange to red, teal to green. Or add a third stop that steers the blend away from the centre, which is what the third colour option here is for.

Keep contrast in mind too. If text sits on the gradient it must remain readable across the whole span, not just where you happened to look. The darkest and lightest points both need to clear the threshold against your text colour — our contrast checker will tell you whether they do. And be sparing: a gradient works as an accent, but a page where every surface has one reads as noisy rather than modern.

Frequently Asked Questions

It points toward where the gradient ends, measured clockwise from north. 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. This differs from the mathematical convention, which is why it often feels backwards at first.
You are blending between colours on opposite sides of the colour wheel, so the interpolation passes through the desaturated centre. Either keep the colours closer together on the wheel, or add a third stop to steer the blend around the middle.
No. Every browser in current use supports unprefixed linear, radial and conic gradients. Prefixes like -webkit-linear-gradient are only relevant for browsers well over a decade old.
Yes, with a small trick: set the gradient as background-image, then add background-clip: text and color: transparent. The text then shows the gradient through its own shapes. Check readability — gradient text is often harder to read than flat colour.
Yes, in every current browser. It is the newest of the three but has been broadly available since 2021, and it replaces what previously needed an image or SVG for pie charts and colour wheels.