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
background: radial-gradient(shape-position, start-color, ..., end-color);
Example
background: radial-gradient(ellipse at center, #8986DF, #7A136A);
Result
Browser compatibility
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Chrome Android |
|---|---|---|---|---|---|---|---|---|---|
| 10+ | 12+ | 3.6+ | 10+ | 6.1+ | 11.5 | 6.1+ | x | 95+ | 95+ |
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.
CSS Radial Gradients Generator
You can easily generate your own radial gradients with the online css gradient generator.