CSS Gradient Generator
Create linear, radial and conic CSS gradients with a live preview. Copy the CSS instantly. Works entirely in your browser.
The three gradient types
Linear — a straight line through the gradient. The angle is measured clockwise from the top, so 0deg points up, 90deg points right and 180deg points down.
background: linear-gradient(135deg, #4f8cff 0%, #8b5cf6 100%);Radial — a circle radiating outward from a centre point.
background: radial-gradient(circle at 50% 50%, #4f8cff 0%, #8b5cf6 100%);Conic — colours arranged around a centre point, like a pie chart or a colour wheel.
background: conic-gradient(from 0deg at 50% 50%, #4f8cff 0%, #8b5cf6 100%);Common angles
| Angle | Direction | Typical use |
|---|---|---|
| 0deg | Bottom to top | Subtle background wash |
| 45deg | Bottom-left to top-right | Diagonal accents |
| 90deg | Left to right | The standard horizontal gradient |
| 135deg | Top-left to bottom-right | The most common hero gradient |
| 180deg | Top to bottom | Vertical fade |
Multiple colour stops
The generator produces two stops, but you can add as many as you like:
background: linear-gradient(
90deg,
#ff0000 0%,
#ffff00 33%,
#00ff00 66%,
#0000ff 100%
);The percentages control where each colour begins. Hard stops need no percentage at all:
background: linear-gradient(to right, red 0 50%, blue 50% 100%);Accessibility
A gradient behind text can destroy contrast. Check the ratio between the text colour and the lightest and darkest stops, not just the average. The colour converter computes WCAG contrast ratios for you.
Frequently asked questions
Is the preview accurate?
Yes. It uses the same CSS gradient syntax that gets copied, rendered by the browser itself, so what you see is exactly what you will get.
What angle should I use for a diagonal gradient?
135deg gives a top-left to bottom-right diagonal, which is the most common choice for hero sections and card backgrounds.
Can I add more than two colours?
Yes. The generated CSS is a starting point — add more stops with the percentages in between, for example red 0%, yellow 50%, blue 100%.
Does this work in all browsers?
Linear gradients are supported everywhere. Radial and conic gradients need a reasonably modern browser — conic gradients landed in Chrome 69, Firefox 83, Safari 12.1 and Edge 79.
How do I check text contrast on a gradient?
Check the text colour against both the lightest and the darkest stop in the gradient. A ratio that passes against the average may still fail against the extremes.