- 0%
- 100%
background: linear-gradient(90deg, #10b981 0%, #1d4ed8 100%);About CSS Gradient Generator
CSS Gradient Generator lets you design a linear or radial gradient with up to five colours and copy the CSS.
Read the guide: How to Make a CSS Gradient and Copy the Code →
Tips for best results
- Neighbouring colours look smooth.
- 90 degrees goes left to right.
- Check text contrast on top.
How to use CSS Gradient Generator
- 1
Choose the type
Linear or radial.
- 2
Pick colours
Set colours, positions and the angle.
- 3
Copy the CSS
Paste it in your stylesheet.
Frequently asked questions
Can I use more than two colours?
Yes, up to five.
Is anything uploaded?
No. Everything is calculated in your browser, so what you type stays on your device.