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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 41Edge Sin soporte NoFirefox Soporte completo 32IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo 8WebView Android Soporte completo 41Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 32Opera Android ? Safari iOS Soporte completo 8Samsung Internet Android ?
On SVG elementsChrome Soporte completo 41Edge Sin soporte NoFirefox Soporte completo 32IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 32Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Véase también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: Undigon, mrstork, teoli, Sebastianz, msanz
Última actualización por: Undigon,