Справочник HTML & CSS

mix-blend-mode

Как цвета элемента смешиваются с тем, что под ним, — как режимы слоёв в графическом редакторе.

Синтаксис

mix-blend-mode: value;

Значения

Параметр	Тип	Описание
normal	keyword	Без смешивания (по умолчанию).
multiply	keyword	Умножение цветов — результат темнее.
screen	keyword	Противоположность умножения — результат светлее.
difference \| overlay	keyword	Другие режимы: разница инвертирует, перекрытие добавляет контраст.

Примеры

Текст, который инвертирует фото под собой:

<style>
  .photo { background: url(/media/photo-600x200.jpg) center / cover; padding: 20px; }
  .photo h2 { margin: 0; font-size: 40px; color: white; mix-blend-mode: difference; }
</style>
 
<div class="photo"><h2>Difference</h2></div>

Перекрывающиеся круги смешиваются, как краски:

<style>
  .circle { width: 80px; height: 80px; border-radius: 50%; display: inline-block; mix-blend-mode: multiply; }
</style>
 
<div class="circle" style="background: cyan;"></div><div class="circle" style="background: magenta; margin-left: -30px;"></div><div class="circle" style="background: yellow; margin-left: -30px;"></div>

Примечания

Чтобы смешать между собой слои фона одного элемента, используйте background-blend-mode.

См. также

filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
opacity — Прозрачность всего элемента вместе с содержимым.

В учебнике

Фильтры — Свойство filter — размытие, чёрно-белый режим, яркость, контраст и тень по контуру drop-shadow, а также backdrop-filter для эффекта матового стекла.

Спасибо, что читаете!