The radial-gradient function creates a radial color gradient.
Its shape may be a circle or an ellipse, depending on the element size.
This function is used by the background and background-image properties.
A radial-gradient function running from center to edge.
<style>
.radial {
background: radial-gradient(red, purple);
height: 250px;
}
</style>
<div class="radial"></div>
The radial-gradient function creates a circular or elliptical form starting at a position going outward.
Optionally, the gradient's direction can also be specified.
radial-gradient(shape size at position,
color-stop-1, color-stop-2, ..., color-stop-n);
| Value | Description |
|---|---|
shape |
Gradient shape. Options are ellipse (default) or circle.
|
size |
Gradient size. Options are: farthest-corner -- meets farthest corner from center (default), closest-side -- meets side closest to center, closest-corner -- meets corner clostest to center, farthest-side -- meets side farthers from center.
|
position |
Gradient position. Default is center.
Example values: top, left, right, center, 10% 50%, 2cm 1cm, right 30% bottom 10%, etc.
|
color-stop-1, |
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage. |
A circular radial-gradient starting at 50px 20px with three color stops and stop positions.
<style>
.radial-stops {
background: radial-gradient(circle at 50px 20px,
red 10%, yellow 35%, purple 85%);
height: 250px;
}
</style>
<div class="radial-stops"></div>
This table shows when radial-gradient support started for each browser.
 Chrome
|
26.0 | Mar 2013 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
12.1 | Nov 2012 |
 Safari
|
6.1 | Jun 2013 |
