Удивлённый парень смотрит на экран, на заднем фоне то, что изображено: окно браузера с градиентной картинкой
Иллюстрация: Кира Кустова

linear-gradient()

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

Кратко

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

Функция linear-gradient используется для задания фона в виде линейного градиента.

Пример

Секция статьи "Пример"
        
          
          .element {  background-image: linear-gradient(#6e4aff, #49A16C);}
          .element {
  background-image: linear-gradient(#6e4aff, #49A16C);
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.

Как пишется

Секция статьи "Как пишется"

Самый простой вид градиента — переход между двумя цветами:

        
          
          .element {  background-image: linear-gradient(#2E9AFF, #F498AD);}
          .element {
  background-image: linear-gradient(#2E9AFF, #F498AD);
}

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

Количество цветов

Секция статьи "Количество цветов"

Градиент может состоять из любого количества цветов. Укажите нужное количество значений через запятую внутри круглых скобок.

Цвета могут быть указаны в любом доступном формате. Подробнее о возможных значениях цветов в статье «Цвета в вебе».

Точки остановки цвета

Секция статьи "Точки остановки цвета"

Через пробел после значения цвета можно задавать начальную и конечную точки цвета. Можно использовать любую единицу длины либо проценты. В начальной точке заканчивается плавный переход из предыдущего цвета. Конечная точка — это точка, с которой начинается плавный переход в следующий цвет.

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

Если конечная точка предыдущего цвета и начальная точка следующего совпадают, то переход будет в виде чёткой линии. Разберём пример.

        
          
          .element {  background-image: linear-gradient(#F498AD 25%, #2E9AFF 25% 50%, #FFD829 75%);}
          .element {
  background-image: linear-gradient(#F498AD 25%, #2E9AFF 25% 50%, #FFD829 75%);
}

        
        
          
        
      

По умолчанию градиент рисуется сверху вниз. В 25 процентах высоты от верха должен начаться плавный переход от цвета #F498AD в цвет #2E9AFF. Но начальная точка второго цвета тоже 25%, поэтому мы наблюдаем чёткую границу между цветами.

Конечная точка цвета #2E9AFF — 50% от верха. В этой точке начинается плавный переход в последний цвет. Конечная точка жёлтого цвета — 75% от верха. В этой точке заканчивается плавный переход между цветами, и дальше весь фон будет равномерно жёлтым. Таким образом, ширина плавного перехода между цветами #2E9AFF и #FFD829 будет 25% (от 50 до 75%) высоты.

Линейный градиент из розового, голубого и жёлтого цветов

Направление градиента

Секция статьи "Направление градиента"

Первым параметром можно передать единицу измерения угла (deg, turn), и тогда линия, вдоль которой строится градиент, повернётся на нужный угол:

        
          
          .element-1 {  background-image: linear-gradient(-30deg, #2E9AFF, #F498AD);}.element-2 {  background-image: linear-gradient(0.25turn, #2E9AFF, #FFD829);}
          .element-1 {
  background-image: linear-gradient(-30deg, #2E9AFF, #F498AD);
}

.element-2 {
  background-image: linear-gradient(0.25turn, #2E9AFF, #FFD829);
}

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

Мы можем задавать направление градиента, используя ключевые слова с приставкой to: to left, to top, to right, to bottom (по умолчанию). Значения имеют следующие эквиваленты в углах:

  • to top0deg;
  • to bottom180deg;
  • to right90deg;
  • to left270deg;

Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента: to top left будет рисовать градиент из правого нижнего в левый верхний угол.

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

Повторяющийся градиент

Секция статьи "Повторяющийся градиент"

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

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

Множественные градиенты

Секция статьи "Множественные градиенты"

Множественный фон элемента может применяться и к градиентам.

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

Подсказки

Секция статьи "Подсказки"

💡 Градиент можно анимировать! 🥳

На практике

Секция статьи "На практике"

Денис Ежков советует

Секция статьи "Денис Ежков советует"

🛠 Используя возможность резких переходов между цветами, можно генерировать различные паттерны при помощи линейного градиента. Яркий пример — разлинованный под школьную тетрадь фон:

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

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово transparent отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный.

        
          
          .element {  background: linear-gradient(#F498AD 10%, transparent);}
          .element {
  background: linear-gradient(#F498AD 10%, transparent);
}

        
        
          
        
      

Линейный градиент в Chrome, красиво растворяется

Линейный градиент от зелёного в прозрачный

Ровно тот же самый градиент, но в Safari. Это вообще легально? 😐

Линейный градиент от зелёного в грязный чёрный

Решить этот баг можно довольно просто, хоть немного и больно. Нужно вместо ключевого слова transparent указать предыдущий цвет градиента, но с нулевой прозрачностью. Визуально итог будет тот же, и даже в Safari всё заработает.

        
          
          .element {  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));}
          .element {
  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));
}

        
        
          
        
      

🛠 Статьи и сборники классных паттернов, созданных при помощи градиентов: