Gradient Builder

What this tool does

The Gradient Builder lets you compose linear and radial CSS gradients with draggable colour stops, then copy ready-to-paste CSS for websites and apps.

It replaces trial-and-error in DevTools when you want hero backgrounds, buttons, or subtle page washes.

How to use it

1. 1Choose gradient type (linear or radial) and angle if applicable.
2. 2Add colour stops on the bar and set each stop's colour and position.
3. 3Drag stops to fine-tune transitions between hues.
4. 4Preview the gradient on the sample box at full size.
5. 5Copy the generated CSS `background` or `background-image` rule into your project.

Frequently asked questions

Can I use more than two colours?

Yes, add extra stops for multi-hue sunsets, metallic sheens, or brand gradients with several key colours.

Does it support repeating gradients?

If the tool exposes repeating modes, enable them for stripes or patterns. Otherwise, duplicate the CSS and add `repeating-linear-gradient` manually from the output.

Will gradients work in all browsers?

Modern browsers support standard CSS gradients. Very old browsers may need fallbacks: set a solid `background-color` before the gradient rule.