CSS: Radial Gradient
Radial Gradient Generator
Number of colors:
Center:
Shape:
Radial Gradient Syntax
Here is a radial gradient:
div { background: radial-gradient(red, white); }
Start from Corner
div { background: radial-gradient(circle at left top, yellow, green) }
Elliptical Radial
By default, the shape of gradient is circle. But you can also make it ellipse.
div { background: radial-gradient(ellipse at right bottom, red, green, blue, white); }
Color Stops
div { background: radial-gradient(circle at center, red 10%, green 20%, white); }
The meaning of parameters for color stops are the same as linear gradient. 〔see CSS: Linear Gradient〕
Sharp Color Change
When 2 color stops are at the same position, you have a sharp color change.
div { background: radial-gradient(circle at bottom left, red, white 20%, red 20%, white); }
RGB, HSL, Color Specs
Color syntax can be any CSS color spec, even with opacity.
Browser Support
As of 2013-03-28, Firefox, Google Chrome, Opera, support it.