CSS-свойство background-blend-mode определяет, как несколько фоновых слоёв одного элемента смешиваются между собой — фоновое изображение с цветом фона, два градиента друг с другом, изображение с градиентом. Формула бленда одна и та же, что в Photoshop или Figma: multiply, screen, overlay, difference и ещё дюжина режимов, каждый со своим математическим правилом наложения.
.hero {
background-image: url('photo.jpg');
background-color: #14336f; /* глубокий синий */
background-blend-mode: multiply; /* фото окрашивается в синий */
}Всего в спецификации 15 значений, плюс normal для сброса. По математике удобнее рассматривать их четырьмя группами: затемняющие, осветляющие, контрастные и компонентные (по составляющим цвета). Перед разбором групп — общая песочница, где можно потыкать все режимы разом на одной фотографии.
Затемняющие режимы: multiply, darken, color-burn
Все три делают результат темнее исходной картинки. Разница — в математике смешивания.
- multiply — значения RGB перемножаются и делятся на 255. Белый цвет становится прозрачным (не влияет), чёрный полностью закрашивает, промежуточные тона окрашивают. Самый ходовой режим для tint-эффектов;
- darken — для каждого пикселя берётся тёмный из двух слоёв. Работает как маска «оставить только тени»;
- color-burn — агрессивная версия multiply: сильно затемняет средние тона, тени становятся насыщенными. Похоже на «выжигание» цвета.
Классический рецепт — винтажный tint. Хочешь превратить обычную фотографию в вечернюю, ностальгическую? Наложи на неё тёплый цвет через multiply:
.vintage-photo {
background-image: url('photo.jpg');
background-color: #d4a574; /* тёплый бежево-охристый */
background-blend-mode: multiply;
/* результат — фото в сепия-подобной гамме */
}Осветляющие режимы: screen, lighten, color-dodge
Зеркальная семья затемняющих. Делают результат светлее.
- screen — инверсия multiply. Значения инвертируются, перемножаются, снова инвертируются. Чёрный не влияет, белый полностью закрашивает. Идеально для добавления «свечения»;
- lighten — берётся светлый из двух пикселей. Обратно darken;
- color-dodge — агрессивное осветление, средние тона теряют насыщенность. Хорошо для эффекта «засветки».
Рецепт: hero-баннер с читаемым текстом на фото. Тёмный градиент через screen осветляет верх, где ляжет заголовок:
.hero {
background:
linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 60%),
url('background.jpg');
background-blend-mode: multiply, normal;
color: white;
}Режимы контраста: overlay, hard-light, soft-light, difference, exclusion
Здесь эффект зависит от того, светлый или тёмный пиксель — логика ветвится.
- overlay — светлые пиксели фонового цвета работают как screen, тёмные — как multiply. Сохраняет средние тона, усиливает контраст;
- hard-light — overlay наоборот: критерий берётся из фонового изображения, а не из цвета. Более резкий эффект;
- soft-light — смягчённая версия overlay. Как рассеянный прожектор поверх фото;
- difference — вычитание. Одинаковые пиксели дают чёрный, инвертированные — белый. Даёт психоделические кислотные эффекты;
- exclusion — смягчённая difference, меньше насыщенных цветов.
Рецепт: dramatic-эффект для героя лендинга. Насыщенный цвет через overlay даёт то, что дизайнеры называют «киношным градингом» — сохраняются полутона, но насыщенность растёт:
.dramatic-hero {
background-image: url('portrait.jpg');
background-color: #2c1250; /* глубокий фиолетовый */
background-blend-mode: overlay;
}Компонентные режимы: hue, saturation, color, luminosity
Эта группа работает не по RGB-каналам, а по HSL-компонентам (оттенок, насыщенность, яркость). Каждый режим сохраняет одни компоненты и подменяет другие.
- hue — оттенок из фонового цвета, насыщенность и яркость из изображения. Перекрашивает фото в один тон, сохраняя контраст;
- saturation — насыщенность из цвета, остальное из изображения. Позволяет обесцветить или, наоборот, форсировать сатурацию;
- color — и оттенок, и насыщенность из фонового цвета; только яркость из фото. Классический duotone-эффект;
- luminosity — яркость из изображения, оттенок и насыщенность из цвета. Обратный color, чаще всего даёт монохромную тонировку.
Рецепт: duotone одним свойством, без Photoshop. Кладём фото и цвет, включаем luminosity или color — получаем эффект, за который в Photoshop чистят карму часами:
.duotone {
background-image: url('photo.jpg');
background-color: #ff2e63; /* контрастный розовый */
background-blend-mode: luminosity;
/* фото перекрашено в розовый, с сохранением тональных переходов */
}Мульти-слойный синтаксис
Элемент может иметь несколько фоновых слоёв через запятую в background-image. Для каждого можно указать свой blend-mode — тоже через запятую в background-blend-mode. Слои считаются сверху вниз (первый в списке — верхний):
.layered {
background:
linear-gradient(45deg, #ff2e63 0%, transparent 60%), /* слой 1 (верхний) */
linear-gradient(-45deg, #08d9d6 0%, transparent 60%), /* слой 2 */
url('texture.jpg'), /* слой 3 */
#1a2434; /* фоновый цвет (низ) */
background-blend-mode: screen, screen, multiply;
/* слой 1 через screen поверх слоя 2,
то что получилось — через screen поверх слоя 3,
и это через multiply поверх фонового цвета */
}Значений в background-blend-mode может быть меньше, чем слоёв — браузер зациклит список. То есть background-blend-mode: multiply при трёх фонах применит multiply ко всем.
background-blend-mode vs mix-blend-mode — частая путаница
Два похожих по имени свойства делают разные вещи.
/* background-blend-mode: смешивает фоны ВНУТРИ одного элемента */
.a {
background-image: url('photo.jpg');
background-color: red;
background-blend-mode: multiply;
/* фото смешивается со своим же background-color */
}
/* mix-blend-mode: смешивает ЭЛЕМЕНТ с тем, что ЗА ним в DOM */
.b {
mix-blend-mode: difference;
/* элемент .b накладывается со своей поверхности на родителя */
}Правило простое: если нужно смешать фоны одного элемента — background-blend-mode. Если нужно смешать один элемент с другим — mix-blend-mode. Классический кейс mix-blend-mode — текст, который меняет цвет в зависимости от того, что под ним (например, белый на светлом фоне и чёрный на тёмном одновременно).
Подводные камни
Производительность на мобильных. Каждый бленд-мод требует композита слоёв на GPU. Один элемент с одним blend-mode — незаметно. Пять элементов с blend-mode на анимированном стриме — уже могут дать jank. Проверяй в DevTools → Performance → Layers, что бленды не подсвечивают «paint» на скролле.
Взаимодействие с filter и backdrop-filter. Оба свойства создают stacking context, и blend-mode применяется внутри этого контекста, не выходя наружу. Хочешь blend через несколько родителей — убедись, что промежуточные не имеют filter, transform или opacity < 1.
background-attachment: fixed. Фиксированный фон + blend-mode работают, но в некоторых мобильных браузерах (особенно iOS Safari) даёт заметные лаги на скролле — фиксированный фон сам по себе тяжёлый, а бленд поверх делает хуже. По возможности используй CSS position: sticky на элементе-обёртке вместо fixed-фона.
Разница между normal и initial. Начальное значение — normal (никакого блендинга). initial — общее CSS-ключевое слово, сбрасывающее свойство в его начальное значение. Функционально они здесь эквивалентны, но в коде принято писать normal — яснее для читателя, что именно происходит.
Комментарии (0)