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).


background: radial-gradient(shape-position, start-color, ..., end-color);


background: radial-gradient(ellipse at center, #8986DF, #7A136A);


Browser compatibility

IE Edge Firefox Chrome Safari Opera iOS Safari Opera
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.