Описание

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

Начальное значениеnormal
Применяется квсе элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой
Создаёт контекст наложенияда

Синтаксис

/* Ключевые слова */
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

Примеры

<svg>
  <circle cx="40" cy="40" r="40" fill="cyan"/>
  <circle cx="80" cy="40" r="40" fill="magenta"/>
  <circle cx="60" cy="80" r="40" fill="yellow"/>
</svg>
circle { mix-blend-mode: multiply; }

Результат

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

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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 32IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 8WebView Android Полная поддержка 41Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 32Opera Android ? Safari iOS Полная поддержка 8Samsung Internet Android ?
On SVG elementsChrome Полная поддержка 41Edge Нет поддержки НетFirefox Полная поддержка 32IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 32Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

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

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

Метки документа и участники

Внесли вклад в эту страницу: SJW, beloglazof, bbars, andreww2012
Обновлялась последний раз: SJW,