CSS Gradient Generator

A standard linear-gradient or radial-gradient value, wrapped in a background declaration when you copy. You can paste it into a background or background-image property in any modern stylesheet.

Stops are spread evenly across the gradient. Two colors sit at 0 percent and 100 percent, three land at 0, 50 and 100 percent, and four fall at 0, 33.33, 66.67 and 100 percent. The percentages are computed automatically.

Between two and six. The + Add button stops at six stops and the remove control is disabled once you are down to two, since a gradient needs at least two colors to blend.

For a linear gradient the angle sets the direction of the blend. 0deg points to the top, 90deg to the right, 180deg to the bottom and 270deg to the left. Radial gradients ignore the angle and render as a circle from the center.

The color swatches in the tool produce six digit hex codes. The underlying engine accepts any valid CSS color verbatim, including names like red, rgb and rgba values, and transparent, which is available through the API.

The Copy CSS button gives you a complete declaration, background: <gradient>;, so you can drop it straight into a rule. Delete the background: prefix if you only want the raw gradient value.

Yes. The preview panel uses the exact same generated string as its background, so the swatch you see is the gradient your CSS will render in a browser.

Not in the visual tool, which always distributes stops evenly. The API accepts an optional pos value from 0 to 100 on each stop if you need uneven spacing.

No. The gradient string is built locally in your browser, so your color choices never leave your device.