CSS Gradient Generator

How it works

Each stop is a hex color and a position (0-100%). Stops are sorted by position automatically, so the order you add them in does not matter. A linear gradient also takes an angle in degrees; a radial gradient takes a shape, circle or ellipse.

Only hex colors (#rgb or #rrggbb) are supported — this keeps validation simple and precise, at the cost of not accepting rgb(), hsl(), or named CSS colors like red.