The repeating-radial-gradient
function repeats a radial gradient color.
This function is used by background and background-image properties.
An element with a repeating-radial-gradient
background color.
<style>
.radial-repeat {
background: repeating-radial-gradient(
orangered 10%, purple 20%, olive 30%);
height: 250px;
}
</style>
<div class="radial-repeat"></div>
The repeating-radial-gradient
function creates a circular or elliptical form starting at a position going outward.
It has the same arguments as the radial-gradient function.
Optionally, the gradient's direction can also be specified.
repeating-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 repeating-radial-gradient
with the center on the right edge.
<style>
.radial-repeater {
background: repeating-radial-gradient(
circle at 100%, black 5%, white 10%);
height: 250px;
}
</style>
<div class="radial-repeater"></div>
This table shows when repeating-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 |