CSS gradient generator

How does a CSS gradient work?

A CSS gradient is an image the browser draws from a list of color stops. linear-gradient(135deg, #6366F1, #EC4899) blends indigo into pink along a line at 135 degrees. For the angle, 0deg points up and angles turn clockwise, so 90deg points right and 180deg, the default, points down.

radial-gradient() spreads the colors out from a center as an ellipse (the default) or a circle, sized by default to reach the corner of the box farthest from the center. conic-gradient() sweeps them around a center like a color wheel, starting at the top unless a from angle rotates it. Linear and radial gradients have worked across browsers since July 2015 and conic gradients since November 2020, according to MDN.

Each stop can have a position. Without one, CSS places the first stop at 0%, the last at 100% and any others evenly between their neighbors. A stop placed before an earlier one is moved up to the largest earlier position, which draws a hard edge. In a conic gradient this tool writes positions as angles, 3.6 degrees per percent.

Gradients are images, so they go in background-image (or the background shorthand), never in background-color. The output puts a solid fallback color first, then the gradient: the background shorthand resets background-image, so the order matters.

Text over a gradient has a different background at every point, so it needs enough contrast at every point. The tool samples the whole gradient, blending HEX colors in gamma-encoded sRGB as CSS Color 4 requires for them, and reports the lowest WCAG contrast ratio for white and for black text.

linear-gradient(<angle>, <color> [<position>%], …)       0deg = up, clockwise
radial-gradient(<circle | ellipse> at <position>, <stops>)
conic-gradient(from <angle> at <position>, <color> [<angle>], …)

background: <first stop>;          ← fallback
background-image: <gradient>;