CSS Gradient Generator
Create a smooth two-color CSS gradient with a live preview and ready-to-copy code.
This CSS gradient generator creates a smooth two-colour linear-gradient() with a live preview and copy-paste code. Choose your two colours and a direction (diagonal, left-to-right, top-to-bottom) and drop the generated CSS straight into a background property. Because CSS gradients are drawn by the browser, they add no HTTP request, stay crisp on every screen and weigh nothing compared with a gradient image.
The smoothest gradients use colours that sit near each other on the colour wheel or two shades of the same hue; very different colours can create a muddy band in the middle. Diagonal angles like 135deg tend to look the most modern.
Frequently asked questions
How do I create a CSS gradient?
Pick a start colour, an end colour and a direction, then copy the generated <code>background: linear-gradient(...)</code> rule into your stylesheet.
Are CSS gradients better than images?
Yes for most uses — they are resolution-independent, add no extra download, and are easy to tweak, unlike a fixed gradient image.
Which direction should I use?
Diagonal (135deg) looks the most dynamic and is common in modern UI, but keywords like "to right" and "to bottom" work too.
Why does my gradient look muddy?
Blending two very different hues can create a dull band in the middle. Use analogous colours or two shades of one hue for a smoother result.