repeating-radial-gradient()

Функция repeating-radial-gradient() создаёт бесконечно повторяющийся радиальный (круговой или эллиптический) градиент.

Пример ниже создаёт узор из чередующихся кругов белого и бирюзового цвета.

        
          
          .element {  background-image:    repeating-radial-gradient(      circle at center,      #ffffff 0,      #ffffff 10px,      #40e3e0 10px,      #40e3e0 20px    );}
          .element {
  background-image:
    repeating-radial-gradient(
      circle at center,
      #ffffff 0,
      #ffffff 10px,
      #40e3e0 10px,
      #40e3e0 20px
    );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для повторяющегося радиального градиента подходят те же аргументы, что и для обычного radial-gradient.

        
          
          .element {  background-image:    repeating-radial-gradient(      ellipse farthest-corner at left,      blue 0,      blue 10px,      white 10px,      white 20px,      aqua 20px,      aqua 30px    );}
          .element {
  background-image:
    repeating-radial-gradient(
      ellipse farthest-corner at left,
      blue 0,
      blue 10px,
      white 10px,
      white 20px,
      aqua 20px,
      aqua 30px
    );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция repeating-radial-gradient() имеет несколько особенностей. Если не указать форму градиента в начале (circle или ellipse), то он будет иметь вид эллипса по умолчанию.

А ещё без указания размеров для цветов браузер просто растянет их до краёв элемента, так что функция будет похожа на обычный radial-gradient.

        
          
          .element {  background-image:    repeating-radial-gradient(      blue,      white,      blue    );}
          .element {
  background-image:
    repeating-radial-gradient(
      blue,
      white,
      blue
    );
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать