CSS Gradient Generator

A well-judged gradient adds depth to a hero, a button or a card without a single image. Choose your colours, pick linear or radial, set the angle, and the generator writes the background declaration for you alongside a live preview you can trust.

Getting gradients right

• Keep the contrast between stops gentle for large backgrounds and bolder for small accents.
• Two or three stops usually reads cleaner than a busy rainbow of colours.
• Copy the finished CSS straight into your background property and you are done.

Because gradients are pure CSS, they stay razor sharp on every screen and add nothing to your page weight.