linear-gradient()
The linear-gradient() function generates an image that transitions colors along a straight line.
Syntax
linear-gradient(<angle>, <stop>...)Examples
.hero {
background: linear-gradient(135deg,
oklch(0.6 0.2 265),
oklch(0.7 0.18 200));
}
.fade { background: linear-gradient(to top, #000, #0000); }
Output
Renders a diagonal blue-to-cyan hero gradient and a bottom-up dark fade overlay.
Notes
Direction can be an angle (0deg is upward) or a keyword like "to right". Add color stops with positions for hard edges or stripes. Use in interpolation spaces like "in oklch" for smoother blends.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 26 |
| firefox | 16 |
| safari | 7.0 |
| edge | 12 |