repeating-conic-gradient()

Удобная функция для создания повторяющегося конического градиента.

В примере ниже мы описываем три цвета, последний из которых заканчивается на 45 градусах.

        
          
          div {  background-image:    repeating-conic-gradient(      from 0deg,      #9d6eea 0deg 15deg,      #6600e9 15deg 30deg,      #b394e9 30deg 45deg    );}
          div {
  background-image:
    repeating-conic-gradient(
      from 0deg,
      #9d6eea 0deg 15deg,
      #6600e9 15deg 30deg,
      #b394e9 30deg 45deg
    );
}

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

Функция repeating-conic-gradient() принимает те же аргументы, что и conic-gradient. Основное отличие заключается в том, что градиент будет повторять себя после границы последнего цвета.

Этот эффект наиболее заметен, когда граница последнего цвета находится в пределах поля градиента.

В этом примере граница последнего цвета находится на 60 градусах. В итоге в полный круг помещается 6 полных повторений градиента.

        
          
          div {  background-image:    repeating-conic-gradient(      from 0deg,      #A100FFFF 0 30deg,      #71C4FFFF 30deg 60deg    );}
          div {
  background-image:
    repeating-conic-gradient(
      from 0deg,
      #A100FFFF 0 30deg,
      #71C4FFFF 30deg 60deg
    );
}

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

При помощи комбинации с background-size можно рисовать паттерны:

        
          
          body {  background-size: 260px 260px;  background-image:    repeating-conic-gradient(      from 45deg,      #000 0% 25%,      #eee 0% 50%    );}
          body {
  background-size: 260px 260px;
  background-image:
    repeating-conic-gradient(
      from 45deg,
      #000 0% 25%,
      #eee 0% 50%
    );
}

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