How to use the CSS Gradient Generator
- Choose a type and angle.
- Pick colour stops (or hit Random).
- Copy the CSS.
About this tool
Gradients add depth to hero sections, buttons and cards without shipping a single image byte. CSS supports three kinds: linear (along an angle), radial (from a centre point) and conic (sweeping around a centre — great for pie charts and colour wheels).
The generated code includes a solid-colour fallback line first, a good habit for email clients and very old browsers that ignore gradients.
Frequently asked questions
Can I animate gradients?
Animate background-position on an oversized gradient, or use @property for smooth colour transitions.
Why is my gradient banding?
Very subtle gradients over large areas can band on 8-bit screens; add more stops or slight noise.