CSS-свойство background-blend-mode

CSS-свойство background-blend-mode определяет, как фоновые изображения элемента смешиваются между собой и с его background-color. Оно позволяет комбинировать наложенные фоны так же, как графические редакторы смешивают слои — тонировать фото, создавать эффект дуотона или плавно переходить от одной текстуры к другой — без изменения самих файлов изображений.

На этой странице описано, что делает каждый режим наложения, как работает смешивание при нескольких фоновых слоях, реальные варианты использования и интерактивные примеры. Значение по умолчанию — normal, то есть без смешивания.

Справочник свойства


Начальное значение	`normal`
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM-синтаксис	`object.style.backgroundBlendMode = "luminosity"`

Синтаксис

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Где <blend-mode> — одно из следующих значений:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Как работает послойное смешивание

Элемент может содержать несколько фоновых слоёв: список background-image, а также background-color, нарисованный под всеми ними. background-blend-mode принимает список режимов через запятую, соответствующих по порядку слоям background-image:

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

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

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

Значения

Значение	Описание
`normal`	Без смешивания — верхний слой отрисовывается поверх нижних (по умолчанию).
`multiply`	Перемножает значения цветовых каналов. Результат всегда темнее; белый цвет становится прозрачным, чёрный остаётся чёрным.
`screen`	Обратный к `multiply`. Результат всегда светлее; чёрный цвет становится прозрачным, белый остаётся белым.
`overlay`	Применяет `multiply` там, где нижний слой тёмный, и `screen` там, где он светлый — усиливает контраст.
`darken`	Сохраняет более тёмный пиксель для каждого канала.
`lighten`	Сохраняет более светлый пиксель для каждого канала.
`color-dodge`	Осветляет нижний слой, отражая верхний, создавая яркие блики.
`color-burn`	Затемняет нижний слой, отражая верхний, усиливая тени.
`hard-light`	Аналогично `overlay`, но роли верхнего и нижнего слоёв меняются местами — сильное усиление контраста.
`soft-light`	Более мягкий вариант `overlay`; сохраняет полутона, избегает резких переходов.
`difference`	Вычитает более тёмный цвет из более светлого для каждого канала. Одинаковые цвета дают чёрный.
`exclusion`	Похоже на `difference`, но с меньшим контрастом; полутона становятся серыми.
`hue`	Берёт тон верхнего слоя, сохраняя насыщенность и светлоту нижнего слоя.
`saturation`	Берёт насыщенность верхнего слоя, сохраняя тон и светлоту нижнего слоя.
`color`	Берёт тон и насыщенность верхнего слоя со светлотой нижнего слоя — стандартный способ тонирования чёрно-белого фото.
`luminosity`	Противоположность `color`: берёт светлоту верхнего слоя с тоном и насыщенностью нижнего слоя.

Понимание семейств режимов наложения

16 режимов делятся на четыре группы:

Затемняющие режимы (multiply, darken, color-burn) — результат никогда не бывает ярче любого из источников. Полезны для теней, углубления затемнённых областей и добавления тёмных тонов.

Осветляющие режимы (screen, lighten, color-dodge) — результат никогда не бывает темнее любого из источников. Полезны для свечения, световых утечек и осветляющих эффектов.

Режимы контраста (overlay, hard-light, soft-light) — затемняют тёмные области и осветляют светлые, повышая общий контраст. Soft-light наиболее мягкий; hard-light — наиболее агрессивный.

Режимы разности/исключения (difference, exclusion) — дают инвертированные или психоделические результаты. В основном используются для творческих эффектов или анимации; редко применяются в UI.

Компонентные режимы (hue, saturation, color, luminosity) — разбивают цвет на компоненты HSL и меняют отдельные каналы между слоями. Это основные инструменты для перекраски фотографий.

Примеры

normal

Без смешивания — переднее изображение отрисовывается поверх заднего без какого-либо взаимодействия между ними.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

screen

Светлые области остаются яркими; тёмные области верхнего изображения становятся прозрачными, открывая нижний слой. Хорошо подходит для добавления свечения или мягких световых эффектов.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

color-dodge

Осветляет нижний слой, отражая верхний. Даёт яркие, высококонтрастные результаты. Полезен для неоновых или световых эффектов.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

multiply

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

overlay

Усиливает контраст, применяя multiply там, где нижний слой тёмный, и screen там, где он светлый. Сохраняет тональный характер нижнего слоя, делая его более выразительным.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

darken

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

saturation

Берёт насыщенность верхнего слоя, сохраняя тон и светлоту нижнего слоя. Полезен для снижения или повышения насыщенности частей фотографии при сохранении цветовой палитры.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Попробуйте сами »

Типичные варианты использования

Тонирование фото фирменным цветом

Наложите сплошной background-color поверх фотографии и используйте multiply, чтобы сместить изображение в сторону нужного оттенка. Тёмные области фото воспринимают тонирование наиболее интенсивно.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Создание эффекта дуотона

Задайте два градиентных фона — один для светов, другой для теней — поверх чёрно-белого изображения, используя screen и multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

Чёрно-белая фотография получает и тёплый слой светов (screen), и холодный слой теней (multiply), создавая классический двутоновый вид, популярный в hero-секциях.

Наложение текстуры

Добавьте текстуру шума или бумаги поверх плоского фонового цвета без редактирования файла ресурса:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light обычно является наиболее мягким выбором — добавляет текстуру без вымывания базового цвета.

Интерактивная перекраска при наведении

Динамически меняйте режим наложения для создания эффекта наведения средствами CSS:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Примечание: background-blend-mode не анимируется (промежуточные состояния отсутствуют), поэтому переходы происходят мгновенно, а не плавно.

Когда нужно смешивать весь элемент

background-blend-mode смешивает слои только внутри собственного фона элемента. Если вам нужно смешать элемент с контентом позади него на странице — например, создать эффект матового стекла — используйте вместо этого mix-blend-mode.

Для настройки одного изображения (яркость, контраст, оттенки серого) без необходимости во втором слое свойство filter часто является более простым решением, а opacity — правильным инструментом для затухания всего элемента.

Поддержка браузерами

background-blend-mode поддерживается во всех современных браузерах (Chrome, Firefox, Edge, Safari и Opera). Internet Explorer никогда не поддерживал это свойство. Предоставляйте разумный запасной background для устаревших сред — несмешанные фоны отображают слои в обычном порядке наложения без видимых ошибок.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Практика

Что делает CSS-свойство background-blend-mode?

Определяет режим смешивания фонового изображения и фонового цвета.Регулирует размер фонового изображения.Управляет прокруткой фонового изображения.Позволяет нескольким фоновым изображениям смешиваться друг с другом.Определяет положение фонового изображения.