radial-gradient()
The radial-gradient() function generates an image transitioning colors outward from a center point.
Syntax
radial-gradient(<shape> at <pos>, <stop>...)Examples
.spotlight {
background: radial-gradient(circle at 30% 30%,
rgb(255 255 255 / 0.3), transparent 60%);
}
Output
Renders a soft circular highlight glowing from the upper-left of the element.
Notes
Specify shape (circle or ellipse), size keywords (closest-side, farthest-corner), and position with "at". Commonly layered over images for vignettes and spotlights.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 26 |
| firefox | 16 |
| safari | 7.0 |
| edge | 12 |