CSS Gradient Generator

The CSS gradient generator is a free tool that runs entirely in your browser, with no data ever sent to a server. Build a gradient and copy the matching CSS line.

The three gradient types

A linear gradient runs in a direction given by an angle: 0° points up, 90° points right. A radial one radiates from a centre point, which suits glows and rounded buttons. A conic one sweeps around the centre like a clock hand, and is what lets you draw pie charts or colour wheels in pure CSS.

Placing the colours

Each colour carries a position expressed as a percentage of the run. Two colours placed close together give a sharp transition, almost a hard edge; spread far apart, they give a soft fade. Two identical colours at the same position create a flat band with no gradient at all.

Dropping the result into a stylesheet

The line produced is used as-is for the background property. On a heading, add background-clip: text and a transparent text colour to tint the letters themselves rather than the block.

What this tool does not do

This tool builds a single gradient: it does not stack several layers, does not offer radial positions other than the centre, and does not export an image. For a PNG or JPEG file, take a screenshot from your browser.

Frequently asked questions

Which angle gives a top-to-bottom gradient?

In CSS, 180° runs from top to bottom and 0° runs from bottom to top. That surprises many people, because the angle names the direction the gradient travels towards.

Will it render the same in every browser?

Linear and radial gradients have been supported everywhere for years. Conic gradients are more recent: they work in current Chrome, Firefox, Safari and Edge, but not in very old browsers.

Is my data sent to a server?

No: the text you type or paste is processed entirely in your browser, on your device. It is never transmitted to a server.

Do I need an account or an install?

No: the tool works directly on this page, with no sign-up and no installation.