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 | (en-US) multiply | (en-US) screen | (en-US) overlay | (en-US) darken | (en-US) lighten | (en-US) color-dodge | (en-US) color-burn | (en-US) hard-light | (en-US) soft-light | (en-US) difference | (en-US) exclusion | (en-US) hue | (en-US) saturation | (en-US) color | (en-US) 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
Valor calculadocomo se especifica
Animation typediscrete
Creates stacking contextyes

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también