CSS Gradient Generator

A linear gradient runs along an invisible gradient line through the centre of the box. 0deg points up and angles turn clockwise, so 90deg runs left to right and the default, 180deg, runs top to bottom. The line is made just long enough that the corners land exactly on 0% and 100%:

length = |width × sin(angle)| + |height × cos(angle)|

For a 1200×600 hero at 135deg: 1200 × 0.7071 + 600 × 0.7071 = 848.5 + 424.3 = 1,272.8px. A stop at 10% sits 127px along that line, not 120px across the box. The readout under the preview does this sum for the box shape you pick.

Corner keywords are not fixed angles. to top right tilts the line so the top-left and bottom-right corners share the 50% colour, which on a 1200×600 box works out to 26.57° (the arctangent of 600 ÷ 1200), not 45°. Only a square box makes them equal. Use a keyword when the colours should meet the corners on any shape; use an angle when the slant should look the same on every screen.

The generator writes every stop with its position, sorted, so the code means exactly what the bar shows. Two stops on the same percentage make a hard edge; the Pie chart and Stripes presets are built that way. For a repeating gradient, the distance from the first to the last stop is the length of one repeat: stops at 0% and 10% repeat ten times along the gradient line.

With hex, rgb() or hsl() colours, browsers blend each red, green and blue channel separately. Between blue #0000FF and yellow #FFFF00, every channel lands halfway, at 127.5, and the midpoint is plain grey, #808080. Load the "Blue → yellow" preset and switch between sRGB and OKLCH to see the difference.

OKLab is a colour space built so that equal steps look like equal changes. Blending in it, the same midpoint is a soft blue #6CABC7; OKLCH goes round the hue wheel instead, through teal and green, keeping the colours saturated. Ask for it in the gradient itself:

background-image: linear-gradient(90deg, #0000FF, #FFFF00);
background-image: linear-gradient(90deg in oklch, #0000FF, #FFFF00);

Browsers that do not understand in oklch drop the second line and keep the first, which is why the export writes both. The CSS Color 4 specification makes Oklab the default for newer colour formats such as oklch(), but keeps sRGB for hex and rgb() so older pages don't change. With OKLCH, "longer hue" goes the other way round the wheel: red to blue through yellow and green instead of through magenta.

The keyword transparent is black with zero opacity. Older browsers blended the colour channels and the opacity separately, so a fade from white to transparent went murky grey on the way. Current browsers blend with premultiplied alpha, where a colour's weight shrinks with its opacity, and the grey band is gone; Safari was the last to switch, in version 15.

The generator still writes transparent stops as the same colour at 0% opacity, for example rgb(0 0 0 / 0%). It reads clearly and stays clean everywhere. Set a stop's opacity with the slider, or type an 8-digit hex such as #00000080 (the last two digits are the opacity, 80 = 50%).

The "Fade to transparent" preset is the usual scrim for captions on photos. Its contrast depends on what is underneath, so the checker asks for a backdrop colour. Over a mid-grey photo (#94A3B8), white text gets 13.1:1 at the bottom edge but only meets 4.5:1 for the bottom 38% of the gradient line; the caption has to stay in that part.

An ellipse stretches with the box; a circle stays round. Moving the centre to an edge, as the Spotlight preset does with at 50% 0%, gives a glow from that edge. Conic gradients sweep round the centre instead of out from it: 0% to 100% is one full turn, which suits pie charts, colour wheels and this checkerboard, often used behind transparent images:

background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;

WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). On a gradient the background changes under every letter, so checking only the stop colours is not enough: the blend between two passing stops can fail, and a failing stop may sit where no text goes. The strip under the bar shows the ratio at 201 points: green for 4.5:1 or more, amber for 3:1 to 4.5:1, red below 3:1.

The Sunset preset shows why that matters. Its stops score 15.99:1, 7.88:1 and 2.15:1 against white, so a stops-only check calls it a fail. Sampled along the gradient, white text stays above 4.5:1 for the first 75% and only drops below 3:1 after about 89%. Keep the heading in the dark three-quarters and it passes; black text only works over the last quarter.

For a radial or conic gradient, 0% is the centre (or start angle) and 100% the outer edge (or the full turn), so read the strip that way.

Most screens show 256 levels per colour channel. A dark gradient from #1E293B to #0F172A moves red from 30 to 15, green from 41 to 23 and blue from 59 to 42, so the colour can only change about 50 times. Across a 1,000px hero that leaves steps roughly 20px wide, and on a good monitor they show as faint stripes.

Ways round it: shorten the distance or widen the colour range, blend in OKLab, or lay a very faint noise texture over the gradient. Some browsers dither gradients, which hides part of the effect, but you cannot rely on it everywhere.

A transition on background-image jumps straight to the new gradient, because browsers cannot interpolate one image into another. Register the part that should change as a typed custom property and animate that instead:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}

.card {
  background-image: linear-gradient(var(--angle), #1E1B4B, #F59E0B);
  transition: --angle 0.6s;
}

.card:hover { --angle: 315deg; }

@property works in Chrome 85, Safari 16.4 and Firefox 128 onwards. Colours can be animated the same way with syntax: '<color>'. The older trick of a large background-size with a moving background-position still works everywhere.