linear-gradient()

Функция 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 top — 0deg;
• to bottom — 180deg;
• to right — 90deg;
• to left — 270deg;

Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента: 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));
}

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

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

• CSS-паттерны
• CSS3 Patterns Gallery
• You Crazy? Patterns with CSS Gradients

+ Развернуть