Gradient Generator

Design linear, radial and conic CSS gradients with multiple stops and copy-ready CSS.

The three gradient types answer different questions. Linear runs along an axis you set in degrees; radial spreads from a point and takes a shape and size; conic sweeps around a centre, which is what makes pie charts and colour wheels possible in pure CSS. Stops are positions along that progression, and adding a mid-stop is how you stop a two-colour blend passing through a muddy middle.

The artefact worth knowing about is banding. Browsers interpolate in sRGB by default, and a gradient between two similar colours across a wide area produces visible steps because there simply are not enough distinct values in between. Adding intermediate stops helps; so does accepting that a subtle gradient across a full-width hero is the hardest case there is.