A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file needed. Gradients are used for backgrounds, buttons, overlays, and decorative elements. Because they are pure CSS, they scale perfectly at any resolution and load instantly with zero HTTP requests.
CSS gradient types
Linear gradient
The most common type — colors transition along a straight line:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Radial gradient
Colors radiate from a center point outward:
background: radial-gradient(circle, #f093fb 0%, #f5576c 100%);
Conic gradient
Colors rotate around a center point (like a color wheel):
background: conic-gradient(from 0deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #ff6b6b);
Gradient direction values
| Value | Direction |
|---|---|
to right |
Left → Right |
to bottom |
Top → Bottom (default) |
to bottom right |
Top-left → Bottom-right |
45deg |
Custom angle |
135deg |
Top-right → Bottom-left |
Popular gradient color combinations
- Sunset:
#FF6B6B → #FFE66D - Ocean:
#2193b0 → #6dd5ed - Purple Dream:
#667eea → #764ba2 - Forest:
#134E5E → #71B280 - Rose Gold:
#f4a8b0 → #d4a5a5
Multi-stop gradients
Add more than 2 colors for complex effects:
background: linear-gradient(
135deg,
#667eea 0%,
#764ba2 33%,
#f093fb 66%,
#f5576c 100%
);
Browser support
CSS gradients are supported in all modern browsers — Chrome, Firefox, Safari, Edge — with no prefixes required. For legacy IE11 support, use a solid color fallback:
background: #667eea; /* fallback */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Gradient overlay on images
A popular technique for darkening hero images so text remains readable:
.hero {
background-image:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('hero.jpg');
}
Tailwind CSS gradient classes
Tailwind provides utility classes for gradients:
<div class="bg-gradient-to-r from-purple-500 to-pink-500">...</div>
Direction classes: from-, via-, to- control color stops. The free gradient generator outputs both CSS and Tailwind class equivalents.
How to generate CSS gradients free
- Go to CSS Gradient Generator
- Add color stops and drag to adjust positions
- Choose linear, radial, or conic type
- Adjust direction angle
- Copy CSS or Tailwind output