CSS - repeating-radial-gradient()

In CSS, the function repeating-radial-gradient() allows you to create an image that consists of gradients as background images, that are repeated and radiate from an origin. The function is similar to radial-gradient(), as it takes the same arguments, where the color stops repeat itself infinitely in all the directions in order to fill the container. The resultant image is a special image, of <gradient> datatype.

Overview

  • The positions of the color stops are shifted by a multiple of the length of basic linear gradient, with every single repetition.

  • If the color stop values are different, a clear visual transition can be seen between the color stops, as the ending color stop's position coincides with that of starting color stop.

  • A repeating-radial-gradient has no intrinsic dimensions, which means an image with no preferred size or aspect ratio.

  • The size of the image will match the size of the element it applies to.

  • The <gradient> datatype can be used only where <image>s are used.

  • The repeating-radial-gradient() function can not be used with <color> datatype and properties such as background-color.

Possible Values

A repeating radial gradient can have following values as arguments:

1. <position>: Specifies the position of the gradient. When no value is specified, it defaults to <center>.

2. <shape>: Value can be either circle (gradient as a circle with a constant radius) or ellipse (gradient as axis-aligned ellipse). When no value is specified, it defaults to ellipse.

3. <extent-keyword>: Specifies the size of the gradient's ending shape. The gradients circle and ellipse accept the following keywords as their size:

Keyword Description
closest-side

For circle: The ending shape of the gradient meets the sides of the box closest to its center.

For ellipse: The ending shape of the gradient meets both the vertical and horizontal sides closest to the center.
closest-corner

The ending shape of the gradient meets exactly the closest corner of the box from its center.
farthest-side

For circle: The ending shape of the gradient meets the sides of the box farthest to its center.

For ellipse: The ending shape of the gradient meets both the vertical and horizontal sides farthest to the center.
farthest-corner

The ending shape of the gradient meets exactly the farthest corner of the box from its center. It is the default value.

4. <color-stop>: Consists of a color stop's <length> values, along with one or two optional values of stop positions.

  • The stop position value can be either <percentage> or a <length> value.

  • Value equal to 0% or 0, represents the center of the gradient.

  • Value equal to 100%, represents the intersection of the ending shape with the virtual gradient ray.

  • The percentage values in between are linearly placed on the virtual gradient ray.

Syntax

repeating-radial-gradient(shape size at position, start-color, ..., last-color);

CSS repeating-radial-gradient() - Farthest Side

Example of a repeating radial gradient with a shape of ellipse and farthest-side of the container:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }

   .repeat-radial {
      background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red,
      black 5%,
      yellow 5%,
      blue 10%
      );
   background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red 0 5%,
      yellow 5% 10%
      );
   }
</style>
</head>
<body>
   <h1>Repeating radial gradient</h1>
   <div class="repeat-radial"></div>
</body>
</html>

CSS repeating-radial-gradient() - Closest Side

Example of a repeating radial gradient with a shape of circle and closest-side of the container:

<html>
<head>
<style>
   div {
      height: 300px;
      width: 300px;
   }

   .repeat-radial {
      background: repeating-radial-gradient(
      circle closest-side at 20% 20%,
      black 5px,
      black 15px,
      yellow 25px,
      yellow 25px
      );
   }
</style>
</head>
<body>
   <h1>Repeating radial gradient</h1>
   <div class="repeat-radial"></div>
</body>
</html>

CSS repeating-radial-gradient() - Farthest Corner

Example of a repeating radial gradient with a shape of ellipse and farthest-corner of the container:

<html>
<head>
<style>
   div {
      height: 300px;
      width: 300px;
   }

   .repeat-radial {
      background: repeating-radial-gradient(
         ellipse farthest-corner at 20% 20%,
         red 0 5%,
         green 5% 10%
   
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
      red,
      black 5%,
      blue 5%,
      green 10%
      );
   }
</style>
</head>
<body>
   <h1>Repeating radial gradient</h1>
   <div class="repeat-radial"></div>
</body>
</html>
Advertisements