CSS Radial Gradients
What is a Radial Gradient?Probably the second most common type of gradient, the radial-gradient().
To create a radial gradient you must define at least two colors, and their value can be any type of color format (e.g. Hex, named colors, rgba, hsla, etc.).
The gradient shape can be "circle" or "ellipse", and if not specified it defaults to "ellipse", while the position, which can be interpreted in the same way as "background-position", if not specified will default to "center" and meaning the gradient will go from inside (start-color) to outside (end-color).
Syntax
Syntax Copy
background: radial-gradient(shape-position, start-color, ..., end-color);
Example
Example Copy
background: radial-gradient(ellipse at center, #8986DF, #7A136A);
Result
More examples
Example Copy
background: radial-gradient(circle at top left, #FDBB2D, #22C1C3);
Example Copy
background: radial-gradient(circle, #FFFFFF 0%, #FFD200 40%, #F7971E 100%);
Common uses
- Spotlight and glow effects
- Badges and notification dots
- Button hover highlights
- Vignette overlays on photos
Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera
Mini |
Android
Browser |
Chrome
Android |
|---|---|---|---|---|---|---|---|---|---|
| 10+ | 12+ | 36+ | 26+ | 15.4+ | 12.1+ | 15.4+ | x | 4.4+ | 151+ |
You can read more information about browser compatibility here. For maximum cross-browser compatibility and coverage, it's important that you use CSS prefixes. You can use this tool to append CSS prefixes to your CSS code.
FAQ
What's the difference between "circle" and "ellipse"?
"circle" keeps the gradient perfectly round regardless of the element's shape; "ellipse" (the default) stretches to match the element's width and height.
How do I move the center of a radial gradient?
Use the "at" keyword with a position, e.g.
radial-gradient(circle at top left, ...) or radial-gradient(circle at 30% 70%, ...).
Generate your own radial gradient →