mix-blend-mode

CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

Синтаксис

/* Ключевые слова */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Глобальные значения */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Значения

<blend-mode>
Режим смешивания, который нужно применить.

Формальный синтаксис

<blend-mode>

где
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Примеры

Пример HTML

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /* Без isolation, цвет фона будет учитываться */
  position: relative;
}

Пример SVG

Этот пример повторяет предыдущий с использованием SVG.

<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>
  </g>
</svg>
circle { mix-blend-mode: screen; }  
.isolate { isolation: isolate; } /* Без isolation, цвет фона будет учитываться */

Спецификации

Спецификация Статус Комментарий
Compositing and Blending Level 1
Определение 'mix-blend-mode' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
mix-blend-modeChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 32IE Нет поддержки НетOpera Полная поддержка 28Safari Полная поддержка 8WebView Android Полная поддержка 41Chrome Android Полная поддержка 41Firefox Android Полная поддержка 32Opera Android Полная поддержка 28Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка 4.0
On SVG elementsChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 32IE Нет поддержки НетOpera Полная поддержка 28Safari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Полная поддержка 32Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

Смотрите также