CSS: Radial Gradient

By Xah Lee. Date: . Last updated: .

Radial Gradient Generator

Number of colors:
Center:
Shape:

code:

Example. Simple Radial Gradient

div.xsimp31 {
 width: 100%;
 height: 150px;
 background-image: radial-gradient(red, white);
}

example. in a square.

div.xsquare0740 {
 width: 50px;
 height: 50px;
 background-image: radial-gradient(red, white);
}

example. in a circle.

div.xcirc3250 {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background-image: radial-gradient(red, white);
}

Start from Corner

background-image: radial-gradient(circle at top left, red, white);
background-image: radial-gradient(circle at top right, red, white);
background-image: radial-gradient(circle at bottom left, red, white);
background-image: radial-gradient(circle at bottom right, red, white);

Elliptical Radial

By default, the shape of gradient is circle. But you can also make it ellipse. the shape of the ellipse corresponds to the width and height of the element.

div.xellip2104 {
 width: 300px;
 height: 150px;
 background-image: radial-gradient(ellipse at right bottom, red, green, blue, white);
}

Color Stops

.x {
 background-image: radial-gradient(
  circle at center,
  red 10%,
  green 20%,
  white
 );
}

unit can be any Length Units or percent.

Each color stop is the beginning and ending position of a specific color. If there is no color before it, assume the same color start at the beginning. If there is no color after it, assume the same color end at the end.

Sharp Color Change

When 2 color stops are at the same position, you have a sharp color change.

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 gradients