Why does the angle do nothing on a radial gradient?

Because a radial gradient spreads outwards from a centre point rather than along a direction. The angle control only applies to linear and conic gradients.

What is a conic gradient?

One that sweeps around a centre point like a colour wheel, rather than spreading outwards. It's what you use for pie charts and colour pickers built in pure CSS.

CSS Gradient Generator

Build a gradient and copy the CSS. Linear, radial and conic are all supported, with two or three colour stops and an angle you can drag. The preview above the code is the real thing — the same CSS value rendered by your browser — so what you see is exactly what you'll get.

First colour

Second colour

Third colour (optional)

Type

Angle90°

Gradient

2 stops

Stop 1

#7C3AED

Stop 2

#06B6D4

background: linear-gradient(90deg, #7C3AED, #06B6D4);

Type: linear
Angle: 90°

Nothing is uploaded — this tool runs inside your browser, so your files never leave your device.

Help us improve

Why use this tool

Linear, radial and conic gradients
Two or three colour stops, with the third optional
Live preview rendered by the browser, not an approximation
Copy-ready `background:` declaration

How it works

1Pick your colours and gradient type.
2Drag the angle until the preview looks right.
3Copy the CSS into your stylesheet.

CSS Gradient Generator — frequently asked questions

In CSS, 0deg points up and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. This catches people out because it's the opposite convention to most maths.

More colour tools

Color Converter HEX → RGB RGB → HEX HEX → HSL CMYK Contrast

Looking for something else? Browse all colour tools

Explore the other tools

Same deal everywhere on the site — free, no sign-up, and no watermark on anything you download.

QR Code Tools Barcode Tools PDF Tools Image Tools Developer Tools SEO Tools Text Tools Calculators Unit Converters File Tools Business Tools AI Tools Utilities

Or see every tool on one page.