Gradient Generator

How to Create a Gradient

1. Pick your two colors. Click each swatch to choose the color the gradient starts and ends with.
2. Choose linear or radial. Linear blends along a straight line; radial spreads outward from the centre.
3. Set the angle. Drag the slider to change the direction of a linear gradient. The preview updates as you go.
4. Copy the CSS. The generated code sits below the controls — click Copy CSS and paste it into your stylesheet.

What This Tool Does

Writing gradient syntax by hand means guessing at the result and reloading to check. This tool shows you the gradient at a usable size while you adjust it, then hands you the CSS to paste in. Handy for hero sections, buttons, card backgrounds, and overlays that need to sit behind text.

Everything runs entirely inside your browser, with nothing to install or sign up for.

Getting a Gradient That Looks Good

The most common disappointment is a muddy band through the middle. It happens when the two colors sit far apart on the color wheel — blue to orange, say — because the blend passes through the desaturated greys between them. Colors that are closer together produce a much cleaner transition, which is why analogous pairs tend to look better than complementary ones here. If you want two distant colors, route the blend through a third color that sits between them rather than letting it find its own path.

On direction: CSS angles start at 0 degrees pointing upward and increase clockwise, so 90 degrees runs left to right and 180 degrees runs top to bottom. That catches people out, and the live preview is the quickest way to settle it. Radial gradients ignore the angle entirely, since they radiate from the centre outward. One last thing — if text will sit on top of the gradient, check it against both end colors with the Contrast Checker. Text that's readable at one end of a gradient often isn't at the other.

Frequently Asked Questions