CSS: Radial Gradient

By Xah Lee. Date: . Last updated: .

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.

CSS Color