Клавиша / esc

repeating-linear-gradient()

Создаёт узоры из повторяющихся линий.

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

Кратко

Скопировано

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

Пример

Скопировано

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

        
          
          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
    );
}

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