Build linear, radial and conic CSS gradients with a live preview, or paste one to edit
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.A CSS gradient is an image the browser draws from colour stops: linear-gradient() along a line, radial-gradient() outward from a point and conic-gradient() around a centre. This generator sets the angle and up to 8 stops with a live preview, and reads a pasted gradient back so you can edit it.
Pick linear, radial or conic, or start from a preset.
Set the angle or direction, then the colour, opacity and position of each stop.
Add stops for more colours; two stops at the same position make a hard edge.
Copy the background lines into your stylesheet.
Gradients are written as a function with a direction and a list of colour stops. The syntax is short but easy to get wrong, and an existing gradient is hard to adjust by eye. Build one with controls while the preview updates, or paste one from your stylesheet to change it.
The three kinds.
| Kind | Direction | Example |
|---|---|---|
| Linear | An angle, 0deg up and 90deg right, or a side such as to right | Hero backgrounds, buttons |
| Radial | A circle or ellipse around a point | Spotlights, vignettes |
| Conic | Around a centre, starting from an angle | Pie charts, colour wheels |
Each kind also has a repeating form, which tiles the stops; with two pairs of stops at equal positions it draws stripes.
Stops. Each stop has a colour, an opacity and a position along the line from 0 to 100 per cent. Two stops at the same position make a hard edge instead of a blend. The output lists the stops in order of position and leaves out what CSS assumes, such as 180deg for a linear gradient or a centred position.
Reading a pasted gradient. Paste a background or background-image value, or just the function. Angles in deg, turn, rad and grad, side keywords, at positions, hex, rgb() and rgba() colours and the basic colour names are read. Where CSS fills something in, the page does the same and says so: stops without a position are spread evenly, a stop placed before an earlier one moves up to it, and transition hints are dropped.
Fallback. The copied CSS starts with a plain background colour, the first stop, so text stays readable if the gradient is not drawn.
The output was checked with lightningcss, a production CSS parser: 300 generated gradients read exactly like an independently written equivalent, and 15 pasted ones keep their meaning. Nothing leaves your browser.
The angle points the gradient line: 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom, which is the default, and 270deg from right to left. Positive angles turn clockwise. The keywords to top, to right, to bottom and to left mean exactly 0, 90, 180 and 270 degrees.
Put two stops at the same position: red 50%, blue 50% switches from red to blue in one line instead of blending. Repeat the trick with repeating-linear-gradient and four stops, such as two colours at 0 to 5 per cent and 5 to 10 per cent, to draw stripes.
A conic gradient sweeps colours around a centre point, like the hands of a clock, instead of along a line. Positions run from 0 to 100 per cent of a full turn, and from 90deg rotates the starting point. Red, yellow, green, cyan, blue, magenta and red again make a colour wheel.
Paste the background or background-image value into the box under the controls and press Read. The kind, angle or position and every stop are loaded into the controls, the preview shows it, and any part CSS filled in by itself, such as missing stop positions, is listed so nothing changes without notice.
Yes. Lower the opacity of a stop and the gradient fades into whatever is behind the element. A stop from black at 0 opacity to black at 60 per cent is the usual overlay that keeps white text readable on a photo. The colour is written as rgb() with an alpha value.
A radial gradient is an ellipse by default, stretched to the element's shape, so on a wide box it looks oval. Choose circle to keep it round whatever the box's proportions. Move the centre with the position controls, for example 30 per cent across and 30 per cent down for a light-source effect.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Gradient Generator and anybody who knows can answer. No account needed.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.