Free Tool
CSS Gradient Generator
Create beautiful CSS gradients with live preview. Linear and radial. Copy the CSS.
135°
Presets
CSS
background: linear-gradient(135deg, #667eea, #764ba2);Types of CSS gradients
- Linear gradients — colors transition along a straight line at a specified angle
- Radial gradients — colors radiate outward from a center point in a circle or ellipse
- Conic gradients — colors rotate around a center point like a color wheel
CSS gradient syntax
| Type | Syntax |
|---|---|
| Linear | linear-gradient(angle, color1, color2) |
| Radial | radial-gradient(shape, color1, color2) |
| Conic | conic-gradient(from angle, color1, color2) |
Frequently Asked Questions
What angle should I use for a gradient?
The most common angles are 0° (bottom to top), 90° (left to right), 135° (top-left to bottom-right), and 180° (top to bottom). 135° is the most popular for modern UI design as it creates a natural diagonal flow.
Can I use more than two colors?
Yes. CSS gradients support unlimited color stops. Add more colors separated by commas: linear-gradient(135deg, #667eea, #764ba2, #f5576c). This tool focuses on two-color gradients for simplicity, but you can extend the output.
Do CSS gradients work in all browsers?
Yes. CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.