This page was translated from English by the community.Learn more and join the MDN Web Docs community.
mix-blend-mode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..
* Some parts of this feature may have varying levels of support.
CSS-свойствоmix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.
Интерактивный пример
mix-blend-mode: normal;mix-blend-mode: multiply;mix-blend-mode: hard-light;mix-blend-mode: difference;<section> <div> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </div></section>.example-container { background-color: sandybrown;}Синтаксис
css
/* Ключевые слова */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>Режим смешивания, который нужно применить.
Формальный синтаксис
mix-blend-mode =
<blend-mode>|
plus-darker|
plus-lighter
<blend-mode> =
normal|
multiply|
screen|
overlay|
darken|
lighten|
color-dodge|
color-burn|
hard-light|
soft-light|
difference|
exclusion|
hue|
saturation|
color|
luminosity
Примеры
Влияние различных значений режима смешивания
<div> <div> <div> Blending in isolation (no blending with the background) </div> <div> <div> normal <div> <div> <div></div> <svg viewBox="0 0 150 150"> <defs> <linearGradient> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </linearGradient> <linearGradient> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </linearGradient> <linearGradient> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </linearGradient> </defs> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> multiply <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> darken <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> screen <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> lighten <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> overlay <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-dodge <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-burn <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hard-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> soft-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> difference <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> exclusion <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hue <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> saturation <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> luminosity <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> <div>Blending globally (blend with the background)</div> <div> <div> normal <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> multiply <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> darken <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> screen <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> lighten <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> overlay <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-dodge <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color-burn <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hard-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> soft-light <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> difference <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> exclusion <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> hue <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> saturation <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> color <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div> luminosity <div> <div> <div></div> <svg viewBox="0 0 150 150"> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div></div>html,body { height: 100%; box-sizing: border-box; background: #eee;}.grid { width: 100%; display: flex; font: 1em monospace;}.row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto;}.col { display: flex; flex: 1 auto; flex-direction: column; height: auto;}.cell { margin: 0.5em; padding: 0.5em; background-color: #fff; overflow: hidden; text-align: center;}.note { background: #fff3d4; padding: 1em; margin: 0.5em 0.5em 0; font: 0.8em sans-serif; text-align: left; white-space: nowrap;}.note + .row .cell { margin-top: 0;}.container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto;}.R { transform-origin: center; transform: rotate(-30deg); fill: url(#red);}.G { transform-origin: center; transform: rotate(90deg); fill: url(#green);}.B { transform-origin: center; transform: rotate(210deg); fill: url(#blue);}.isolate .group { isolation: isolate;}.normal .item { mix-blend-mode: normal;}.multiply .item { mix-blend-mode: multiply;}.screen .item { mix-blend-mode: screen;}.overlay .item { mix-blend-mode: overlay;}.darken .item { mix-blend-mode: darken;}.lighten .item { mix-blend-mode: lighten;}.color-dodge .item { mix-blend-mode: color-dodge;}.color-burn .item { mix-blend-mode: color-burn;}.hard-light .item { mix-blend-mode: hard-light;}.soft-light .item { mix-blend-mode: soft-light;}.difference .item { mix-blend-mode: difference;}.exclusion .item { mix-blend-mode: exclusion;}.hue .item { mix-blend-mode: hue;}.saturation .item { mix-blend-mode: saturation;}.color .item { mix-blend-mode: color;}.luminosity .item { mix-blend-mode: luminosity;}Пример HTML
html
<div> <div></div> <div></div> <div></div></div>css
.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.
html
<svg> <g> <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>css
circle { mix-blend-mode: screen;}.isolate { isolation: isolate;} /* Без isolation, цвет фона будет учитываться */Спецификации
| Specification |
|---|
| Compositing and Blending Level 2 # mix-blend-mode |