Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides