Для использования разных режимов смешивания фонов в CSS используется свойство background-blend-mode. 12 Оно делает верхний (активный) слой полупрозрачным, что позволяет показывать сквозь него нижележащие слои. 2 Обязательное условие — фоновых слоёв должно быть минимум два. 2

Все режимы смешивания можно разделить на следующие группы: 2

1. Нормальный режим — normal. 2 Значение по умолчанию, которое указывает на отсутствие смешивания, так как верхний слой остаётся непрозрачным. 2
2. Режим контраста — overlay, soft-light, hard-light. 2
3. Режим затемнения — darken, multiply, color-burn. 2
4. Режим осветления — lighten, screen, color-dodge. 2
5. Режим сравнения — difference, exclusion. 2
6. Компонентный режим — hue, saturation, color, luminosity. 2

Некоторые режимы и их описание:

• overlay. 2 Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. 2 Так как режим работает в среднем диапазоне этих двух режимов, то полутона (50% серого) становятся прозрачными. 2
• soft-light. 2 Похож на overlay, но придаёт более натуральный мягкий эффект, напоминающий сияние рассеянного светового пятна на фоне. 2
• hard-light. 2 Цвета умножаются или осветляются, в зависимости от источника цвета. 2 Эффект похож на сияние резкого светового пятна на фоне. 2
• darken. 2 Если пиксели верхнего слоя темнее, чем на нижележащих слоях, они сохраняются в изображении. 2 Если пиксели в верхнем слое светлее, они заменяются на более тёмные пиксели нижнего слоя, поэтому в основном сохраняются тёмные тона всех слоёв. 2
• multiply. 2 Работает путём умножения уровней яркости пикселов верхнего слоя с пикселами нижележащих слоёв. 2 Отлично подходит для создания теней и удаления белых и других светлых тонов (сохраняя при этом более тёмные цвета). 2
• color-burn. 2 Заменяет цвета на противоположные, затемняя верхний слой, не меняя светлые (белые) оттенки. 2
• lighten. 2 Тёмные пиксели верхнего слоя заменяются на светлые пиксели нижележащих слоёв. 2 Светлые пиксели не заменяются. 2
• screen. 2 Эффект аналогичен режиму lighten с отличием в том, что удаляет больше тёмных пикселей, создавая плавный переход. 2 Работает как режим multiply, но удаляет тёмные тона. 2
• color-dodge. 2 Насыщает светлые тона и блики. 2 Тёмные области изображения остаются без изменений. 2
• difference. 2 Отображает тональную разницу между двумя слоями, удаляя белые пиксели из слоя. 2 Результирующее изображение получается тёмным и противоположным по тону. 2
• exclusion. 2 Сравнивает пиксел активного слоя и эквивалентный пиксел нижележащего слоя с учётом их яркости, делая избирательную инверсию. 2 Чёрный никогда не инвертируется, белый — всегда. 2 Одинаковые цвета компенсируют друг друга, давая серый цвет. 2