CSS Gradient Generator
Create beautiful CSS linear and radial gradients online. Copy the CSS code for your website.
About this calculator
Build linear or radial gradients with three colour stops, an angle or direction buttons, 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.