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 Januar 2020.

* Some parts of this feature may have varying levels of support.

Diemix-blend-modeCSS Eigenschaft legt fest, wie der Inhalt eines Elements mit dem Inhalt des übergeordneten Elements und dem Hintergrund des Elements vermischt werden soll.

Probieren Sie es aus

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;}

Syntax

css

/* Keyword values */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: plus-darker;mix-blend-mode: plus-lighter;/* Global values */mix-blend-mode: inherit;mix-blend-mode: initial;mix-blend-mode: revert;mix-blend-mode: revert-layer;mix-blend-mode: unset;

Werte

<blend-mode>: Der anzuwendende Mischmodus.
plus-darker: Vermischung unter Verwendung desplus-darker Kompositionsoperators.
plus-lighter: Vermischung unter Verwendung desplus-lighter Kompositionsoperators. Nützlich für Überblendeffekte (verhindert unerwünschtes Blinken, wenn zwei überlagernde Elemente ihre Deckkraft in entgegengesetzte Richtungen animieren).

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable
ErstelltStapelkontext	Ja

Formale Syntax

mix-blend-mode =
<blend-mode>|
plus-lighter

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

Beispiele

Effekt verschiedener mix-blend-mode Werte

<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>        plus-darker        <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>        plus-lighter        <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>        plus-darker        <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>        plus-lighter        <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: #eeeeee;}.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: white;  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, black 0%, transparent 50%, white 100%),    linear-gradient(to bottom, yellow 0%, magenta 50%, cyan 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;}.plus-darker .item {  mix-blend-mode: plus-darker;}.plus-lighter .item {  mix-blend-mode: plus-lighter;}

Verwendung von mix-blend-mode mit HTML

HTML

html

<div>  <div></div>  <div></div>  <div></div></div>

CSS

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; /* Without isolation, the background color will be taken into account */  position: relative;}

Ergebnis

Verwendung von mix-blend-mode mit 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

css

circle {  mix-blend-mode: screen;}.isolate {  isolation: isolate;} /* Without isolation, the background color will be taken into account */

Ergebnis

Verwendung von mix-blend-mode mit Text

Dieses Beispiel verwendetmix-blend-mode, um die Textfarbe mit der Hintergrundfarbe des übergeordneten Elements zu mischen.

HTML

html

<div>  <p>Mostly Harmless</p>  <p>Mostly Harmless</p>  <p>Mostly Harmless</p>  <p>Mostly Harmless</p></div>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap";.container {  background-color: blue;}p {  font:    4rem "Rubik Moonrocks",    cursive;  font-weight: bold;  color: orange;  padding: 0.5rem;  margin: 0;}.multiply {  mix-blend-mode: multiply;}.screen {  mix-blend-mode: screen;}.hard-light {  mix-blend-mode: hard-light;}