repeating-linear-gradient()

Создаёт фон в виде полос из повторяющегося линейного градиента.

Зададим узор из чёрно-оранжевых полос.

        
          
          div {  background-image:    repeating-linear-gradient(      -45deg,      black 0,      black 25px,      orange 25px,      orange 50px    );}
          div {
  background-image:
    repeating-linear-gradient(
      -45deg,
      black 0,
      black 25px,
      orange 25px,
      orange 50px
    );
}

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

Повторяющийся линейный градиент принимает те же аргументы, что и обычный linear-gradient. Но, в отличие от него, повторяет узор из линий до тех пор, пока не заполнит весь элемент.

Лучше всего разница между двумя градиентами видна на примерах. Зададим повторяющийся линейный градиент в виде зебры.

        
          
          div {  background-image:    repeating-linear-gradient(      to right,      white 0 10%,      black 10% 20%    );}
          div {
  background-image:
    repeating-linear-gradient(
      to right,
      white 0 10%,
      black 10% 20%
    );
}

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

Когда полоска чёрного цвета заканчивается на 20%, градиент снова наполняется белыми и чёрными полосами, хотя мы не задавали их снова, — поэтому он называется повторяющимся линейным градиентом. Такой эффект не сработает с обычным linear-gradient.

        
          
          div {  background-image:    linear-gradient(      to right,      white 0 10%,      black 10% 20%    );}
          div {
  background-image:
    linear-gradient(
      to right,
      white 0 10%,
      black 10% 20%
    );
}

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

Когда чёрная полоска достигла 20%, градиент не повторился, а лишь заполнил фон элемента последним цветом.

Полосы repeating-linear-gradient() не обязательно всегда такие ровные. Если каждый следующий цвет не начинается в точке окончания предыдущего, то линии смажутся, и фон примет иной вид.

        
          
          div {  background-image:    repeating-radial-gradient(      0.50turn,      yellow 0 30px,      white 70px 80px,      aqua 100px 130px    );}
          div {
  background-image:
    repeating-radial-gradient(
      0.50turn,
      yellow 0 30px,
      white 70px 80px,
      aqua 100px 130px
    );
}

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