repeating-radial-gradient()

Создаёт градиент из повторяющихся круговых или эллиптических узоров.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Функция 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
    );
}

        
        
          
        
      
Открыть демо в новой вкладке