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

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

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.

Pruébalo

mix-blend-mode: normal;

mix-blend-mode: multiply;

mix-blend-mode: hard-light;

mix-blend-mode: difference;

.example-container {
  background-color: sandybrown;
}

Syntax

css

/* 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

: El modo de mezcla que debería ser aplicado.

Sintaxis formal

mix-blend-mode = 
    |
  plus-darker   |
  plus-lighter  

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

Ejemplos


  
    Mezclado aislado (sin mezclar con el fondo)
    
      
        normal
        
          
            
            
          
        
      
      
        multiply
        
          
            
            
          
        
      
      
        darken
        
          
            
            
          
        
      
      
        screen
        
          
            
            
          
        
      
      
        lighten
        
          
            
            
          
        
      
      
        overlay
        
          
            
            
          
        
      
      
        color-dodge
        
          
            
            
          
        
      
      
        color-burn
        
          
            
            
          
        
      
      
        hard-light
        
          
            
            
          
        
      
      
        soft-light
        
          
            
            
          
        
      
      
        difference
        
          
            
            
          
        
      
      
        exclusion
        
          
            
            
          
        
      
      
        hue
        
          
            
            
          
        
      
      
        saturation
        
          
            
            
          
        
      
      
        color
        
          
            
            
          
        
      
      
        luminosity
        
          
            
            
          
        
      
    

    Mezclado global (mezclar con el fondo)
    
      
        normal
        
          
            
            
          
        
      
      
        multiply
        
          
            
            
          
        
      
      
        darken
        
          
            
            
          
        
      
      
        screen
        
          
            
            
          
        
      
      
        lighten
        
          
            
            
          
        
      
      
        overlay
        
          
            
            
          
        
      
      
        color-dodge
        
          
            
            
          
        
      
      
        color-burn
        
          
            
            
          
        
      
      
        hard-light
        
          
            
            
          
        
      
      
        soft-light
        
          
            
            
          
        
      
      
        difference
        
          
            
            
          
        
      
      
        exclusion
        
          
            
            
          
        
      
      
        hue
        
          
            
            
          
        
      
      
        saturation
        
          
            
            
          
        
      
      
        color
        
          
            
            
          
        
      
      
        luminosity

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

Ejemplo vivo

html

css

circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /* sin aislación, el color de fondo será tenido en cuenta */

Especificaciones

Specification
Compositing and Blending Level 2 # mix-blend-mode

Compatibilidad con navegadores

Véase también

background-blend-mode