CSS Gradient Generator
Build CSS gradients visually and copy the code.
About the CSS Gradient Generator
The CSS Gradient Generator lets you build a linear gradient by choosing two colours and an angle, with a live preview and ready-to-copy CSS. It is the quick path from an idea to a working background without writing the syntax by hand.
Frequently asked questions
This tool focuses on a clean two-colour gradient. For multi-stop gradients, take the generated code as a starting point and add extra colour stops separated by commas in the CSS.
CSS gradients are resolution-independent, weigh nothing to download, and scale perfectly on any screen. An image background is only worth it for textures a gradient cannot reproduce.