background-blend-mode

background-blend-mode смешивает фоновую картинку и фоновый цвет элемента. Пиксель за пикселем.

        
          
          <div class="card"></div>
          <div class="card"></div>

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

        
          
          .card {  background-image: url("texture.jpg");  background-color: #2E9AFF;  background-blend-mode: multiply;}
          .card {
  background-image: url("texture.jpg");
  background-color: #2E9AFF;
  background-blend-mode: multiply;
}

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

Когда у элемента есть несколько фоновых слоёв — например, background-image поверх background-color — они по умолчанию накрывают друг друга. Изображение сверху, цвет снизу. И цвет виден только там, где изображение прозрачное.

background-blend-mode меняет правила игры: вместо перекрытия браузер смешивает пиксели слоёв по математической формуле. Каждый режим делает это по своей формуле, что даёт разный визуальный эффект.

Логика такая: верхний слой source (источник), нижний слой backdrop (подложка). Браузер обрабатывает каждый пиксель: берёт цвет из обоих слоёв, применяет формулу и получает итоговый цвет.

Важно понимать отличие от mix-blend-mode: background-blend-mode работает только внутри одного элемента, смешивает его собственные фоновые слои. mix-blend-mode смешивает сам элемент с тем, что находится под ним в DOM.

Если у элемента несколько фоновых изображений, каждый слой смешивается с тем, что под ним, по цепочке сверху вниз. Самый нижний слой (обычно background-color) всегда остаётся подложкой.

        
          
          .element {  background-image: url("foto.jpg");  background-color: tomato;  background-blend-mode: multiply;}
          .element {
  background-image: url("foto.jpg");
  background-color: tomato;
  background-blend-mode: multiply;
}

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

При нескольких фонах значения задаются через запятую в том же порядке, что и в background-image:

        
          
          .element {  background-image: url("top.png"), url("bottom.jpg");  background-color: navy;  background-blend-mode: screen, multiply;}
          .element {
  background-image: url("top.png"), url("bottom.jpg");
  background-color: navy;
  background-blend-mode: screen, multiply;
}

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

Доступные значения делятся на несколько смысловых групп.

Значение по умолчанию. Верхний слой просто перекрывает нижний без смешения.

darken — оставляет более тёмный из двух пикселей. Светлые участки изображения заменяются цветом фона, тёмные — остаются.

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

color-burn — затемняет подложку так, чтобы отразить цвет источника. Даёт сильный, насыщенный контраст.

lighten — оставляет более светлый из двух пикселей. Эффект, обратный darken.

screen — инвертирует оба слоя, перемножает и снова инвертирует. Результат всегда светлее. Чёрный цвет нейтрален, белый — даёт белый. Хорошо для создания свечения.

color-dodge — осветляет подложку, чтобы отразить цвет источника. Похоже на screen, но более интенсивно.

overlay — комбинирует multiply и screen: тёмные участки затемняются, светлые — осветляются. Усиливает контраст подложки.

hard-light — то же самое, что overlay, но с переставленными ролями: логика multiply/screen применяется к источнику, а не к подложке.

soft-light — мягкая версия hard-light. Похоже на рассеянный свет прожектора — осветляет или затемняет, но без резких переходов.

difference — вычитает более тёмный цвет из более светлого. Белый инвертирует подложку, чёрный не меняет ничего. Даёт высококонтрастные психоделические эффекты.

exclusion — похоже на difference, но с меньшим контрастом и более мягкими переходами.

Эти режимы работают с отдельными компонентами цвета в модели HSL (оттенок, насыщенность, светлота):

hue — берёт оттенок источника и светлоту с насыщенностью подложки.

saturation — берёт насыщенность источника, а оттенок и светлоту — из подложки.

color — берёт оттенок и насыщенность из источника, светлоту — из подложки. Полезно для «раскраски» чёрно-белых изображений.

luminosity — берёт светлоту источника, а оттенок и насыщенность — из подложки. Обратный эффект относительно color.

💡 background-blend-mode отлично работает в паре с CSS-градиентами. Градиент в качестве background-image плюс режим наложения — быстрый способ создать цветовой оверлей поверх фотографии без дополнительных элементов в разметке.

        
          
          .hero {  background-image:    linear-gradient(      to bottom, transparent, #000    ), url("photo.jpg");  background-blend-mode: multiply;  background-size: cover;}
          .hero {
  background-image:
    linear-gradient(
      to bottom, transparent, #000
    ), url("photo.jpg");
  background-blend-mode: multiply;
  background-size: cover;
}

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

💡 Свойство не наследуется и не влияет на дочерние элементы — только на фоновые слои самого элемента. Чтобы смешивать элементы между собой, нужен mix-blend-mode.

💡 isolation: isolate не влияет на background-blend-mode, только на mix-blend-mode. Если нужно ограничить область смешения при использовании background-blend-mode, это делается структурой разметки.

        
          
          .card {  background-image: url("photo.jpg");  background-size: cover;  background-blend-mode: multiply;}.card--blue   { background-color: #2E9AFF; }.card--orange { background-color: #FF8630; }.card--purple { background-color: #C56FFF; }
          .card {
  background-image: url("photo.jpg");
  background-size: cover;
  background-blend-mode: multiply;
}

.card--blue   { background-color: #2E9AFF; }
.card--orange { background-color: #FF8630; }
.card--purple { background-color: #C56FFF; }

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

        
          
          .element {  background-image:    url("pattern-on-white.svg"),    url("photo.jpg");  background-blend-mode: multiply;  background-size: auto, cover;  background-repeat: repeat, no-repeat;}
          .element {
  background-image:
    url("pattern-on-white.svg"),
    url("photo.jpg");
  background-blend-mode: multiply;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

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

        
          
          .element {  background-image:    url("pattern-on-black.svg"),    url("photo.jpg");  background-blend-mode: screen;  background-size: auto, cover;  background-repeat: repeat, no-repeat;}
          .element {
  background-image:
    url("pattern-on-black.svg"),
    url("photo.jpg");
  background-blend-mode: screen;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}

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