CSS Gradient Generator

Linear, radial, conic — and when each one is right

CSS gives you three gradient functions, and they paint along different geometries. A linear-gradient runs colour along a straight axis you set by angle (0deg is bottom-to-top, 90deg is left-to-right, 135deg is the popular diagonal) — the workhorse for backgrounds, buttons and hero washes. A radial-gradient emanates from a centre point outward in ellipses, which is what you want for spotlights, glows, and soft vignettes. A conic-gradient sweeps colour around a centre like a clock hand, which makes it the one that can draw pie charts, colour wheels, and angular 'shine' effects — anything where the colour change is rotational rather than positional. Picking the wrong type is the most common reason a gradient 'won't look right' no matter how you nudge the stops: a sunburst wants conic, a glow wants radial, and forcing either out of a linear gradient is a losing battle. Full syntax reference: MDN's gradient docs.

Colour stops and hard stops: positions do the work

A gradient is just a list of colour stops, each pinned to a position along the axis (0% to 100%). Between two stops the browser interpolates a smooth blend; the positions decide where the transition happens and how wide it is. Spread two stops far apart and you get a gentle fade; bunch them close and the transition tightens. Pull them to the same position — say red at 50% and blue at 50% — and you get a hard stop: a crisp line with no blend at all, which is how you build stripes, two-tone splits, and flat colour bands without an image. This is the trick most people miss: gradients aren't only for soft fades. Equal-position stops turn linear-gradient into a precise stripe generator, and repeating-linear-gradient extends that into patterns.

Where it bites: forget to give your stops explicit positions and the browser distributes them evenly, which is rarely what you wanted for a three-or-more-colour gradient. Set the positions deliberately. Pull your stop colours from a real source — sample them off an image with the colour picker or generate a coherent set with the palette extractor — and the gradient stops looking like a default and starts looking designed.

The grey-band problem: how colours interpolate

Blend two vivid complementary colours — a saturated blue into a saturated yellow, say — and you'll often see an ugly muddy grey or brown smeared through the middle. That's not a bug in the tool; it's a consequence of interpolating in the sRGB colour space, where the straight-line path between two saturated colours dips through low-saturation territory and passes near grey. The eye reads that desaturated midpoint as dirt. Designers have fought this for years with workarounds: add an intermediate stop in a more saturated hue to route the blend around the grey zone, or choose colour pairs that are closer in hue so the path never sags toward neutral.

The modern fix is interpolating in a perceptual colour space — OKLCH or LCH — where the path between two colours keeps its chroma and the midpoint stays vivid. CSS now supports this with an 'in oklch' syntax on gradients. This tool outputs widely-supported sRGB syntax by default for maximum browser compatibility; if you hit the grey-band problem, the cleanest cure is to swap the interpolation space in the output to oklch, or insert a saturated mid-stop. Either beats accepting the mud.

Banding, and the formats CSS gradients can't reach

A perfectly smooth gradient can still show visible stairstep bands of colour, especially across a large area or a subtle low-contrast fade. The cause is bit depth: an 8-bits-per-channel display can represent only 256 levels per colour, and a gentle gradient stretched across many pixels may need finer steps than that, so adjacent bands of solid colour appear. It's most obvious in dark blues and greys on big backgrounds. Mitigations are limited in pure CSS — adding a faint noise/dither overlay is the classic trick, or steepening the gradient so each band is narrower and less noticeable. The other hard limit is reach: CSS gradients render in browsers, full stop. Email clients routinely strip them and Open Graph/preview images are static pixels, which is why this tool also emits an inline SVG gradient — self-contained, no external references — that survives in emails and rasterises into an OG image where a CSS gradient simply wouldn't exist.