CSS Gradient Generator
Generate beautiful CSS gradients online. Create linear and radial gradients with color stops and copy CSS code.
About this calculator
Create a gradient with as many colour stops as you like, pick linear or radial, set the angle, and copy the CSS.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Pick the colours.
- Choose the type and angle.
- Press Copy CSS.
Gradient syntax
A linear gradient fades along an angle: linear-gradient(90deg, #6366f1 0%, #ec4899 100%). 0deg points up, 90deg right, 180deg down. A radial gradient spreads from a point outwards: radial-gradient(circle at center, …). A conic gradient sweeps around a point like a pie. Each colour can have a stop position in percent. More than two stops make multi-colour gradients.
Worked example
Direction keywords
| to right | 90deg |
| to bottom | 180deg |
| to bottom right | diagonal, about 135deg on a square |
| to top | 0deg |
Tips and common mistakes
- Use two close hues for subtle, professional gradients.
- Check text contrast over the lightest and darkest parts.
- Add a solid background-color as a fallback.
- Use stop positions to make hard edges (e.g. 50% and 50%).
- Banding on large gradients can be reduced with a little noise or an extra stop.
Frequently asked questions
What is a CSS gradient?
A smooth transition between colours, drawn by the browser as an image.
What is the difference between linear and radial?
Linear fades along a line, radial spreads from a point.
What does 135deg mean?
A diagonal from top-left to bottom-right.
Can I use more than two colours?
Yes, add as many stops as you like.
Do gradients work as backgrounds only?
They are images, so use background or background-image.
How do I make text gradient?
Use background-clip: text with a transparent text colour.