Смешивание цветов
Классы mix-blend-* задают режим смешивания элемента с содержимым под ним.
Берите их для декоративных слоёв поверх изображений: тонирования, «прожига»,
цветных подложек под текстом.
Пример
Режимы
Один и тот же круг цвета bg-primary поверх одного изображения в каждом режиме.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-2 sm:grid-col-3 lg:grid-col-6 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-normal" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-normal</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-multiply" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-multiply</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-screen" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-screen</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-overlay" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-overlay</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-darken" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-darken</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-lighten" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-lighten</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-color-dodge" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-color-dodge</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-color-burn" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-color-burn</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-hard-light" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-hard-light</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-soft-light" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-soft-light</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-difference" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-difference</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-exclusion" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-exclusion</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-hue" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-hue</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-saturation" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-saturation</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-color" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-color</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-luminosity" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-luminosity</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-plus-darker" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-plus-darker</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="relative isolate overflow-hidden radius-1 h-e4 flex items-center justify-center" >
<img class ="absolute inset-0 w-full h-full object-cover" src ="assets/color-study.jpg" alt ="" >
<div class ="relative w-1/2 h-1/2 radius-round bg-primary mix-blend-plus-lighter" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-plus-lighter</code >
</div >
</div >
Граница смешивания
Элемент смешивается со всем, что лежит под ним, вплоть до ближайшего контекста наложения. isolate на родителе отрезает внешний фон: справа круг смешивается только с родителем, у которого нет фона.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="flex items-center justify-center h-e4 radius-1 bg-tertiary-container" >
<div class ="flex items-center justify-center w-2/3 h-2/3 radius-1/2 border border-outline-variant" >
<div class ="w-d8 h-d8 radius-round bg-primary mix-blend-difference" ></div >
</div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-difference</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="flex items-center justify-center h-e4 radius-1 bg-tertiary-container" >
<div class ="flex items-center justify-center w-2/3 h-2/3 radius-1/2 border border-outline-variant isolate" >
<div class ="w-d8 h-d8 radius-round bg-primary mix-blend-difference" ></div >
</div >
</div >
<code class ="text-1/2 color-on-surface-variant" >mix-blend-difference, у родителя isolate</code >
</div >
</div >
Классы
Класс
CSS
Значения
mix-blend-normalmix-blend-mode: normal—
mix-blend-multiplymix-blend-mode: multiply—
mix-blend-screenmix-blend-mode: screen—
mix-blend-overlaymix-blend-mode: overlay—
mix-blend-darkenmix-blend-mode: darken—
mix-blend-lightenmix-blend-mode: lighten—
mix-blend-color-dodgemix-blend-mode: color-dodge—
mix-blend-color-burnmix-blend-mode: color-burn—
mix-blend-hard-lightmix-blend-mode: hard-light—
mix-blend-soft-lightmix-blend-mode: soft-light—
mix-blend-differencemix-blend-mode: difference—
mix-blend-exclusionmix-blend-mode: exclusion—
mix-blend-huemix-blend-mode: hue—
mix-blend-saturationmix-blend-mode: saturation—
mix-blend-colormix-blend-mode: color—
mix-blend-luminositymix-blend-mode: luminosity—
mix-blend-plus-darkermix-blend-mode: plus-darker—
mix-blend-plus-lightermix-blend-mode: plus-lighter—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Какой режим выбрать
Класс
Что делает
mix-blend-normalбез смешивания, значение по умолчанию
mix-blend-multiply, mix-blend-darken, mix-blend-color-burn, mix-blend-plus-darkerзатемняют; белые участки слоя подложку не меняют
mix-blend-screen, mix-blend-lighten, mix-blend-color-dodge, mix-blend-plus-lighterосветляют; чёрные участки слоя подложку не меняют
mix-blend-overlay, mix-blend-soft-light, mix-blend-hard-lightусиливают контраст подложки
mix-blend-difference, mix-blend-exclusionвычитают цвета: на светлом темнеет, на тёмном светлеет
mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosityпереносят одну составляющую цвета: оттенок, насыщенность, цвет или яркость
Тонирование изображения
Слой цвета роли поверх изображения в режиме color окрашивает изображение,
сохраняя его светотень. isolate на обёртке не даёт слою смешаться с фоном
страницы.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="relative isolate" >
<img class ="w-full" src ="photo.jpg" alt ="Фотография" >
<div class ="absolute inset-0 bg-primary mix-blend-color" ></div >
</div >
Ограничения
Результат зависит от цветов под элементом, поэтому в светлой и тёмной теме
он разный. Текст в режиме смешивания может потерять контраст — проверьте
его в обеих темах.
mix-blend-plus-darker поддерживают не все браузеры; в Chromium режим не
действует, и элемент рисуется как с mix-blend-normal.Значение, отличное от mix-blend-normal, создаёт у элемента новый контекст
наложения.
У семейства нет префиксов ширины экрана и состояния.
См. также
Предыдущая Сепия элемента Следующая Фильтры подложки
