How do I use the CSS gradient generator?
- Enter the start and end colours (and an optional middle colour).
- Choose linear or radial and an angle.
- Press Make gradient and copy the CSS.
CSS gradient generator: frequently asked questions
Do gradients slow down a website?
No. CSS gradients are drawn by the browser and are lighter than image backgrounds.
Why include a solid colour too?
It is a fallback for very old browsers and for when the gradient cannot be drawn.
What gradient types can I make?
Linear, radial and conic gradients with multiple colour stops.
Do CSS gradients work in all browsers?
Yes, in all modern browsers without prefixes.
Are gradients better than images?
For backgrounds, yes — they are tiny, sharp at any size and easy to change.
How do I avoid banding?
Add intermediate stops or a subtle noise texture.
Can text sit on a gradient?
Yes, but check contrast at the lightest point behind the text.
How do I make a gradient text effect?
Use the gradient as a background with background-clip: text and transparent text colour.
Can I animate gradients?
Animate background-position or use custom properties.
Does it work right-to-left?
Use logical directions or flip the angle for Arabic layouts.