CSS Gradient Generator

How it works

Stops. Each stop is a color plus a position in percent. The gradient interpolates linearly between neighboring stops in sRGB; two stops sharing a position create a hard transition. Reverse flips both colors and positions, Distribute evenly re-spaces all stops at equal intervals, and Add stop drops a new stop into the widest gap with the color that belongs there. Positions you set out of order are quietly corrected the same way browsers do it: no stop renders before the one above it.

Angles. 0deg points up, 90deg right, and the gradient line always covers the whole box — a 45deg gradient on a wide box runs farther than one on a square, which is why the length depends on both width and height.

Banding. A ramp between two colors can only show as many distinct colors as the sum of the red, green and blue differences it covers. When that count is small compared to the area (a dark-to-slightly-less-dark gradient across a wide hero, say), neighboring pixel columns repeat the same color and the eye sees stripes. The note under the preview estimates this from your actual stops — it's a rule of thumb, not a verdict.

PNG export rasterizes the same stops at 800×500; repeated gradients are expanded stop-by-stop, so the file matches the CSS preview exactly.

Like every Workbench tool, this runs entirely on your device: nothing is uploaded, logged or stored.