• This feature determines how the ending shape of the circle/ellipse will be aligned.
  • With closest-side, the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
  • With closest-corner, the ending shape takes form so it fits in the box’s corner closest to its center.
  • Farthest-side does the same as closest-side, but meets the side further from the center instead.
  • Finally, farthest-corner does the same as closest-corner, but meets the corner farthest away from the center instead.
  • The stop (numerical value) of a color measures its stopping position.
  • It starts at the center of the circle/ellipse with a value of 0% or 0px, and ends at the intersection of the ending shape with the virtual gradient ray (100%)

Repeating Radial Gradient Demo

Shape:
Set end?
Ending Parameters:
Position: By Label By Measure
Colors:
CSS Code:

{{timedChange()}}

#radial-gradient {
  background: repeating-radial-gradient(
      {{this.shape}},
      {{color}}
   );
}