mix-blend-mode

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

Syntax

/* Valores clave */
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;

/* Valores globales */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Valores

<blend-mode>
El modo de mezcla que debería ser aplicado.

Sintaxis formal

<blend-mode>

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

Ejemplos

Ejemplo vivo

<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; } /* sin aislación, el color de fondo será tenido en cuenta */

Especificaciones

Especificación Estado Comentario
Compositing and Blending Level 1
La definición de 'mix-blend-mode' en esta especificación.
Candidate Recommendation Definición inicial
Valor inicialnormal
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal
Creates stacking contextyes

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
mix-blend-modeChrome Soporte completo 41Edge Sin soporte NoFirefox Soporte completo 32IE Sin soporte NoOpera Soporte completo 28Safari Soporte completo 8WebView Android Soporte completo 41Chrome Android Soporte completo 41Firefox Android Soporte completo 32Opera Android Soporte completo 28Safari iOS Soporte completo 8Samsung Internet Android Soporte completo 4.0
On SVG elementsChrome Soporte completo 41Edge Sin soporte NoFirefox Soporte completo 32IE Sin soporte NoOpera Soporte completo 28Safari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 32Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida

Véase también