CSS repeating-radial-gradient() Function

The repeating-radial-gradient function repeats a radial gradient color.

This function is used by background and background-image properties.

Example

#

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>

Using repeating-radial-gradient

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.

Syntax

repeating-radial-gradient(shape size at position, 
          color-stop-1, color-stop-2, ..., color-stop-n);

Values

#

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-stop-2,
...,
color-stop-n
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.

More Examples

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>

Browser support

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

You may also like

Guides