CSS Gradient Generator

A linear gradient runs along a line at an angle: 0deg points up, 90deg right, 180deg down (CSS Images Level 3). The page writes those four axis angles as the keywords to top, to right, to bottom, to left and every other angle in degrees. It never writes to top right for 45deg, because the corner keywords aim at the box's actual corner, which depends on its aspect ratio — the two are only equal for a square. A radial gradient grows from a centre as a circle or ellipse, sized by a keyword such as farthest-corner. A conic gradient sweeps around a centre from a starting angle (CSS Images Level 4); its stop positions are angles, so a stop entered at 25 % is written as 90deg.

Stops are written in the order given. A stop without a position is spaced evenly by the browser between its positioned neighbours; two stops at the same position make a hard edge (the trick behind stripes). If a stop is positioned before the one preceding it, CSS clamps it to the previous position — the page warns instead of silently reordering. Colours are written as the hex you entered, or as rgba() when the opacity is below 100 %, so transparent fades are visible in the text. Browsers interpolate in sRGB unless told otherwise; a fade to transparent through rgba(0,0,0,0) keeps the hue, which is why the page uses the stop's own colour at zero alpha.

A repeating gradient tiles the span between its first and last positioned stops, so every stop needs a position and the span must be shorter than the box — stops from 0 % to 100 % never repeat. The output pairs the gradient with background-color set to the first stop: a solid fallback for printing, for e-mail clients and for anything that fails to paint the image.

Colour-space interpolation keywords (in oklch), colour hints (the midpoint syntax), multiple backgrounds and text-fill gradients are not generated here. Banding on large, subtle gradients depends on the display; a small amount of noise in artwork hides it, CSS cannot. Nothing you enter leaves the browser; the same four anonymous usage counts as the rest of the site apply.