Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.
Вот так будет выглядеть главная страница Medium, если изображениям на ней добавить фон lightblue и применить режим смешивания background-blend-mode: difference:
Это свойство смешивает цвета фонов, то есть для получения эффекта нужно добавить контейнеру несколько фоновых изображений и/или фоновый цвет.
Но работать можно не только с фонами. Свойство mix-blend-mode позволяет смешивать с нижними слоями цвета самого элемента.
Например, можно получить вот такой классный эффект, просто добавив тексту цвет lightsalmon и режим смешивания mix-blend-mode: color-dodge.
Обратите внимание: в Chrome 58+ есть ошибка, из-за которой свойство mix-blend-mode не работает на тегах body или html, если они имеют прозрачный фон.
