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.
Why gradients sometimes look muddy
Blend two colors from opposite sides of the color wheel and the midpoint often turns grey or brown. Blue to yellow passing through a dull olive is the classic example.
The cause is the color space. By default browsers interpolate in sRGB, which is not perceptually uniform, so the mathematical midpoint is not the midpoint your eye expects. Two fixes:
Add a midpoint stop — steer the transition through a color you choose:
/* muddy */
background: linear-gradient(90deg, #0000ff, #ffff00);
/* clean — routed through cyan/green */
background: linear-gradient(90deg, #0000ff, #00cccc 50%, #ffff00);
Interpolate in a better color space — modern browsers support this directly:
background: linear-gradient(in oklch 90deg, #0000ff, #ffff00);
OKLCH is perceptually uniform, so the transition keeps its brightness and saturation instead of sagging in the middle. Support is good in current Chrome, Safari, and Firefox; older browsers ignore the in oklch and fall back to the sRGB path, so it degrades safely.
The transparent-gradient gotcha
Fading a color to nothing seems obvious, but this produces a grey haze in the middle:
/* wrong — `transparent` is rgba(0,0,0,0) = transparent BLACK */
background: linear-gradient(to right, #ff6b6b, transparent);
The keyword transparent is transparent black, so the gradient blends toward black while also fading. Fade to a transparent version of the same color instead:
/* right */
background: linear-gradient(to right, #ff6b6b, rgba(255, 107, 107, 0));
Banding on large gradients
Across a wide area, a subtle gradient can show visible stripes because 8-bit color has only 256 steps per channel. Options: increase contrast between stops, add a faint noise overlay, or use oklch interpolation, which distributes steps more evenly.
Accessibility: text on gradients
Contrast requirements apply to the worst point of the gradient, not the average. Text passing over a light stop can fail WCAG AA even if it looks fine over the dark end.
Check contrast at both extremes, and if the range is too wide, put text on a solid overlay panel rather than directly on the gradient.
Performance
Gradients are cheap to paint once but expensive to animate. background-position and color-stop changes force repaints on every frame. To animate a gradient smoothly, animate opacity or transform on a stacked layer instead — those are GPU-composited:
.layer { transition: opacity .4s; } /* smooth */
.layer { transition: background .4s; } /* janky */
Frequently asked questions
Do gradients hurt page speed?
No. They are a few bytes of CSS with no HTTP request, and they replace image files that would be far larger. A gradient is almost always faster than the background image it substitutes.
Why does my gradient look different on mobile?
Usually the element's dimensions, not the gradient. Angles are relative to the box, so 135deg across a wide desktop hero and a narrow phone screen covers a different visual path. Test at real breakpoints.
Can gradients be used on text?
Yes, by clipping the background to the text:
.gradient-text {
background: linear-gradient(90deg, #667eea, #f5576c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Always keep a color fallback, since text is invisible if the clip fails.
How many color stops is too many?
There is no hard limit, but past four or five the effect usually reads as noise. Complex multi-stop gradients also make banding more likely.
Should I use deg or keywords like to right?
They are equivalent for the common cases (to right equals 90deg). Keywords are more readable; degrees give precise control. Note that gradient angles run clockwise from the top, which is the opposite convention to transform: rotate().
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