CSS mix-blend-mode — режими змішування як у фотошопі

CSS властивість mix-blend-mode визначає, як кольори елемента змішуються з тим, що лежить під ним — режими multiply, screen, overlay, ті самі, що в графічних редакторах.

правити

Загальний опис

Звичайний елемент просто перекриває те, що під ним. З режимом змішування кольори взаємодіють: multiply перемножує (результат темнішає), screen освітлює, difference дає інверсію.

Класична задача, яку це розв'язує — читабельний текст поверх фотографії без напівпрозорої підкладки: mix-blend-mode: difference із білим текстом інвертує кольори фону під літерами, і текст видно на будь-якому зображенні.

Другий типовий випадок — дуотон: кольоровий шар поверх чорно-білого фото з режимом multiply чи screen дає стилізацію під два кольори без редактора.

Споріднена background-blend-mode робить те саме, але між шарами тла ОДНОГО елемента.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	41	32	8	28	79	—

Підтримка: мобільні переглядачі

Переглядач
	41	41	32	8

Приклади

+ запропонувати свій приклад у пісочниці

<div class="hero">
    <h2 class="title">Читабельно завжди</h2>
</div>

.hero {
    background: linear-gradient(90deg, #111, #eee);
    padding: 2rem;
}

.title {
    color: #fff;
    /* інвертує фон під літерами */
    mix-blend-mode: difference;
}