CSS gradient generator — linear, radial and conic

How to build a gradient

1. Pick the type: linear for a straight sweep, radial for a glow, conic for anything that goes round a centre.
2. Drag the handles on the stop bar to reposition colours, or click anywhere on the bar to insert a new stop — its colour is interpolated from its neighbours.
3. Set the angle with the dial, the number field or one of the eight quick buttons.
4. Press the random button until something catches your eye, then refine it.
5. Copy the CSS. It includes a flat-colour fallback, the prefixed line for old WebKit, and the standard declaration.

Which way the angle points

This trips up nearly everyone, because two different conventions are still in circulation. In the standard linear-gradient(), 0deg points to the top of the box and angles increase clockwise. The old -webkit-linear-gradient() measured from the east and went anti-clockwise. The relationship between the two is webkit = 90 − standard, which is exactly the conversion this tool applies when it writes the prefixed line.

The keyword forms and the degree forms are not interchangeable on a non-square element: to bottom right always aims at the actual corner, whatever the aspect ratio, while 135deg is a fixed direction. If you want the gradient to track the corner as the box resizes, use the keyword.

The three gradient functions

linear-gradient()

Colours run along a straight line. The gradient line passes through the centre of the box, and its length is set so that the perpendicular lines through the corners land exactly on the 0% and 100% stops — which is why a 45° gradient on a wide box has a longer ramp than the box is tall.

radial-gradient()

Colours radiate from a point. Two knobs matter: the shape (circle or ellipse) and the size keyword, which decides where 100% lands. farthest-corner is the default and usually right; closest-side produces a tight, contained glow that is useful for spotlight effects.

conic-gradient()

Colours sweep around a centre point like a clock hand. This is the simplest way to draw a pie chart, a progress ring, a colour wheel, or the rotating sheen on a card border. Stops are angles rather than distances, and there is no -webkit- variant to worry about — the function shipped unprefixed everywhere.

Fixing a muddy middle

Blend blue into yellow in sRGB and you get grey in the middle, not green. That is an artefact of interpolating in a non-perceptual colour space: the path between two hues passes close to the neutral axis. Three practical fixes:

• Add a mid stop in a colour you actually like, so the gradient never visits the grey zone unsupervised.
• Reduce the hue distance. Neighbouring hues never go muddy, which is why analogous gradients look effortless.
• Interpolate in a better space. Modern browsers accept linear-gradient(in oklch, …), which keeps saturation and lightness perceptually even across the ramp. Keep the sRGB declaration above it as a fallback.

Repeating gradients and stripes

repeating-linear-gradient() tiles the stop list past the last stop. It only does anything useful when your last stop sits well below 100% — the pattern repeats every N% where N is the position of the final stop. Hard stops, where two stops share a position, produce crisp stripes rather than a blend:

background: repeating-linear-gradient(
  45deg,
  #1e293b 0 10px,
  #334155 10px 20px
);

Performance and accessibility

• Never animate the gradient itself. Changing stop positions or colours forces a repaint of the whole painted area every frame. Animate background-position on an oversized gradient, or cross-fade the opacity of two stacked layers, both of which the compositor can handle.
• Check the text on top. A gradient background means the contrast ratio changes across the element. Test the text against the lightest and the darkest point, not the average.
• Give the element a background colour too. The flat fallback line matters when a gradient fails to parse — one typo in a long stop list otherwise leaves the element transparent.
• Watch for banding on large, low-contrast gradients. A subtle noise texture overlaid at 2–3% opacity hides it completely.