Colour — free, no signup
Gradient generator.
Pick two colours, set an angle, copy CSS that works everywhere.
Runs in your browser · Nothing uploaded · Nothing stored
Loading…
Gradients came back and stayed, largely because they add depth without adding weight — a gradient is a few bytes of CSS where a background image would be a hundred kilobytes and an extra request.
Linear covers almost everything: hero sections, buttons, cards. Radial suits spotlights and soft vignettes behind a focal point. Conic is the one people forget, and it is what you want for pie charts, colour wheels and anything that sweeps around a centre.
Two colours close together in hue produce something subtle and professional. Two colours far apart produce something that dates quickly and often turns muddy in the middle, where the interpolation passes through grey. If your gradient looks dirty in the centre, that is why — move the hues closer together.
Worth knowing
- Keep hues close for a professional result. Wide jumps go grey in the middle.
- Check text contrast against both ends of the gradient, not just the average.
- A gradient is a fraction of the weight of a background image and needs no extra request.
Questions
Frequently asked
Do CSS gradients work in every browser?
Linear and radial gradients are supported everywhere. Conic gradients are supported in all current browsers but not in very old ones — provide a solid colour fallback if that matters to you.
Why does my gradient look muddy in the middle?
The browser interpolates through the colour space between your two stops. Colours far apart on the wheel pass through desaturated territory. Move them closer together.
Can I add more than two colours?
This generator handles two stops. For more, take the generated CSS and add extra colour stops separated by commas.
Related
More colour tools
Beyond the tools
Want to know what else is holding your site back?
Our free website audit runs 26 checks across SEO, speed, content and security, and tells you in plain English what to fix first.
Run a free audit