How to create a CSS gradient
- Choose linear, radial or conic.
- Set each color and move its position slider. Add as many stops as you like.
- Adjust the angle (linear and conic) or shape (radial), or start from a preset.
- Copy the CSS and paste it into your stylesheet.
The code includes a solid background color first as a fallback for very old browsers.
Gradient types
| Type | What it does | Example |
|---|---|---|
| Linear | Colors blend along a straight line at any angle | linear-gradient(135deg, #2747d6, #f2a516) |
| Radial | Colors spread outward from a center point | radial-gradient(circle, #fff, #2747d6) |
| Conic | Colors sweep around a center, like a color wheel or pie chart | conic-gradient(from 0deg, red, yellow, red) |
Tips for good-looking gradients
- Neighbouring hues (blue → purple, orange → pink) blend more smoothly than opposites, which can look muddy in the middle.
- Use a subtle gradient (two close shades) for buttons and cards; save bold ones for hero sections.
- Put two stops at the same position for a hard edge, useful for stripes.
- Check that text on top stays readable with the contrast checker, and find matching colors with the color palette generator.
All modern browsers support linear, radial and conic gradients without vendor prefixes.
Frequently asked questions
How do I add a gradient background in CSS?
Use the background property with a gradient function, for example background: linear-gradient(135deg, #2747d6, #f2a516);
Can a gradient have more than two colors?
Yes — add as many color stops as you like.
What angle is top to bottom?
180deg (to bottom). 90deg goes left to right.
Do gradients need vendor prefixes?
No. All current browsers support standard gradient syntax.