CSS 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.

Smooth gradients need intentional stop spacing: cluster stops for hard bands, spread them for soft blends. Preview at the size you will actually use. A gradient that looks fine in a tiny swatch can band or look muddy across a full-width hero.

Keep small text off weak gradient regions, or verify both ends of the wash in the Contrast Checker, so decoration never quietly breaks readability.

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.
6. 6Add a solid `background-color` fallback before the gradient for older browsers or failed loads.
7. 7If text sits on the gradient, recheck contrast at the lightest and darkest stops.

Practical tips

• Use gradients for heroes and decoration; put body copy on solid surfaces when you can.
• Spread stops for soft blends; cluster them for sharper bands.
• Always ship a solid fallback colour under the gradient rule.
• Preview at production size. Tiny swatches hide banding and muddy mid-tones.

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.

Why does my gradient look banded?

Large soft blends between distant hues can show banding on some displays. Add intermediate stops or reduce the distance between colours.

Can I put white text on any brand gradient?

Only if every region under the text still passes contrast. Many pastel washes fail. Use a scrim or darker stops under the headline.

Linear or radial for a hero?

Linear angles are common for full-width heroes; radial works well for spotlights and button sheens. Pick based on where you want the eye to land.

Related guide

Dig deeper in Build an accessible colour system for UI (palette to contrast). Choose brand colours, check WCAG contrast, and ship gradients that still keep text readable across buttons, body copy, and dark mode.

Or browse all ToolzWorx guides.