CSS Gradient Generator

What this does

A CSS gradient is not an image. The browser paints it from a rule, which means it scales to any element size without a second request and costs nothing in bandwidth. The three functions differ in how they walk the colour line: linear-gradient runs along a straight axis, radial-gradient spreads out from a point, and conic-gradient sweeps around one.

The angle is measured from the top

In CSS, 0° on a linear gradient points upward and the angle increases clockwise, so 90° points right. This is different from the mathematical convention and different from SVG, where gradients are given as two coordinates rather than an angle. The SVG output on this page converts for you: it computes the gradient line the way CSS defines it, including the part most people miss, that the line is stretched so the perpendicular through each corner falls on it. That length depends on the box, which is why the SVG panel asks for a width and height.

Where the SVG version is honest and where it is not

Linear and radial gradients translate exactly. radial-gradient with an ellipse shape becomes a circular SVG gradient plus a gradientTransform scale, which is the same result by a different route. Conic gradients have no SVG equivalent at all, so the output approximates one with 72 flat wedges of five degrees each. On a slow colour transition you may see faint banding at the seams; on a hard-edged conic, such as a pie chart, the result is exact. If you need a smooth conic in an email client, a raster image is the safer choice.

Interpolation happens in sRGB

Both CSS and this page mix stops in plain sRGB. Two stops that are far apart in hue can pass through a dull grey in the middle — blue to yellow is the usual offender. The fix is to add a third stop at the midpoint with the colour you actually want there.

Nothing you type is sent anywhere. The preview is a CSS background on this page and the SVG is built as text in your browser.