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

Определение и применение

CSS свойство background-blend-mode задаёт режим смешивания каждого фонового изображения с нижележащими фоновыми слоями и цветом фона самого элемента. Фон не смешивается с содержимым или фоном других элементов.

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Попробуйте значения background-blend-mode

Градиент смешивается с жёлтым background-color. Свойство меняет смешивание слоёв фона; текст не участвует в этом смешивании.

Значение свойства

background-blend-mode: normal

HTML и CSS примера
HTML
<div class="demo-target" aria-label="Область фона"></div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  background-color: #ffcb69;
  background-image: linear-gradient(135deg, #245a85, #ef803c);
  background-blend-mode: normal;
}

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

Спецификация: compositing

Поддерживается во всех основных браузерах с 2020 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.background-blend-mode
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background-blend-mode✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
color✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
color-burn✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
color-dodge✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
darken✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
difference✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
exclusion✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
hard-light✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
hue✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
lighten✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
luminosity✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
multiply✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
normal✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
overlay✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
plus-lighter××✓preview×××××××××
saturation✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
screen✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8
soft-light✓35✓79✓30✓22✓8✓35✓30✓22✓8✓3.0✓37✓8

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background-blend-mode: [ normal | multiply | screen | overlay |
  darken | lighten | color-dodge | color-burn |
  hard-light | soft-light | difference | exclusion |
  hue | saturation | color | luminosity ]#;

/* Глобальные значения */
background-blend-mode: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. # — одно или несколько значений через запятую для фоновых слоёв. Квадратные скобки группируют части записи.

JavaScript синтаксис:

JavaScript
element.style.backgroundBlendMode = "normal";

Начальное значение свойства

normal.

Значения свойства

Значения background-blend-mode
Значение Описание
normal Рисует верхний слой поверх нижнего с учётом прозрачности, без изменения цветов режимом смешивания.
multiply Умножает цветовые компоненты: результат обычно темнее. Белый верхнего слоя сохраняет нижний цвет, чёрный даёт чёрный.
screen Осветляет сочетание слоёв. Чёрный верхнего слоя сохраняет нижний цвет, белый даёт белый.
overlay Сочетает затемнение и осветление в зависимости от нижнего цвета, усиливая его контраст.
darken Выбирает меньшее значение каждой цветовой компоненты двух слоёв.
lighten Выбирает большее значение каждой цветовой компоненты двух слоёв.
color-dodge Осветляет нижний цвет в зависимости от верхнего, уменьшая контраст.
color-burn Затемняет нижний цвет в зависимости от верхнего, увеличивая контраст.
hard-light Сочетает multiply и screen в зависимости от верхнего цвета; напоминает жёсткий свет.
soft-light Мягко осветляет или затемняет нижний цвет в зависимости от верхнего.
difference Берёт абсолютную разность компонент. Белый инвертирует нижний цвет, чёрный сохраняет его.
exclusion Похож на difference, но даёт меньший контраст.
hue Берёт цветовой тон верхнего слоя, насыщенность и светимость — нижнего.
saturation Берёт насыщенность верхнего слоя, цветовой тон и светимость — нижнего.
color Берёт цветовой тон и насыщенность верхнего слоя, светимость — нижнего.
luminosity Берёт светимость верхнего слоя, цветовой тон и насыщенность — нижнего.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства background-blend-mode устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Для нескольких фоновых изображений значения перечисляют через запятую в порядке background-image: первый слой находится сверху. Короткий список повторяется до числа изображений, лишние значения не используются.

Спецификация

Compositing and Blending Level 1.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

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

Смешивание рисунка и цвета

Сравните исходное наложение normal и результат multiply: особенно заметно изменение белой и серой областей. Меняйте режим только в правиле .second на screen, overlay или difference — исходный вариант останется для сравнения. Режим смешивает фоновые слои между собой и с цветом фона.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Исходное наложение</h3>
    <div class="sample"></div>
  </section>
  <section>
    <h3>Результат смешивания</h3>
    <div class="sample second"></div>
  </section>
</div>
style.css
CSS
.sample {
    background-image: url('assets/colors.svg');
    background-size: cover;
    background-color: #edc44b;
    background-blend-mode: normal;
}
.second {
    background-blend-mode: multiply;
}