CSS Gradient Generator
Create smooth CSS gradients with two or three colours. Choose linear or radial, set the angle, preview it live, and copy the background code for your website or Elementor section.
How to make a CSS gradient
- Pick two colours, or tick the option to add a third.
- Choose linear or radial and set the angle.
- Copy the CSS into your stylesheet, or use Elementor’s background gradient settings with the same colours and angle.
Gradient angles
| Angle | Direction |
|---|---|
| 0deg | Bottom to top |
| 90deg | Left to right |
| 135deg | Top left to bottom right |
| 180deg | Top to bottom |
Design tips
- Gradients between neighbouring colours look smooth and modern.
- Very different colours can look muddy in the middle; add a third colour to guide the blend.
- Use gradients for backgrounds and highlights, not for body text.
Pick colours with the color palette generator, add depth with the box shadow generator, and round corners with the border radius generator.
More free tools and guides
Learn this hands-on
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this CSS gradient generator free?
Yes. It is free with no sign-up and works in your browser.
Do CSS gradients work in all browsers?
Yes, all modern browsers support linear and radial gradients.
Are CSS gradients better than gradient images?
Usually yes. They load instantly, scale to any size and are easy to change.
How do I add a gradient in Elementor?
In a section or container, open Style, Background, choose Gradient, and enter the colours and angle.