CSS repeating-radial-gradient() Function

The CSS repeating-radial-gradient() function repeats radial gradients.

Syntax:

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

shape – specifies the shape of the gradient (ellipse (default), circle).

size – specifies the size of the gradient (farthest-corner (default), closest-side, closest-corner, farthest-side).

position – specifies the position of the gradient (center (default)).

start-color, …, last-color – color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
  height: 100px;
  width: 200px;
  position: relative;
  background-image: repeating-radial-gradient(yellow, orange 10%, green 15%);
}
</style>
</head>
<body>

<div id="gradient-1"></div>

</body>
</html>

Output:

Enjoy coding!

Share this: