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.

CSS-свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

Интерактивный пример

mix-blend-mode: normal;

mix-blend-mode: multiply;

mix-blend-mode: hard-light;

mix-blend-mode: difference;

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

Синтаксис

css

/* Ключевые слова */
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: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Значения

: Режим смешивания, который нужно применить.

Формальный синтаксис

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

Примеры

Влияние различных значений режима смешивания


  
    
      Blending in isolation (no blending with the background)
    
    
      
        normal
        
          
            
            
          
        
      
      
        multiply
        
          
            
            
          
        
      
      
        darken
        
          
            
            
          
        
      
      
        screen
        
          
            
            
          
        
      
      
        lighten
        
          
            
            
          
        
      
      
        overlay
        
          
            
            
          
        
      
      
        color-dodge
        
          
            
            
          
        
      
      
        color-burn
        
          
            
            
          
        
      
      
        hard-light
        
          
            
            
          
        
      
      
        soft-light
        
          
            
            
          
        
      
      
        difference
        
          
            
            
          
        
      
      
        exclusion
        
          
            
            
          
        
      
      
        hue
        
          
            
            
          
        
      
      
        saturation
        
          
            
            
          
        
      
      
        color
        
          
            
            
          
        
      
      
        luminosity
        
          
            
            
          
        
      
    

    Blending globally (blend with the background)
    
      
        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;
}

Пример HTML

html

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; /* Без isolation, цвет фона будет учитываться */
  position: relative;
}

Пример SVG

Этот пример повторяет предыдущий с использованием SVG.

html

css

circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /* Без isolation, цвет фона будет учитываться */

Спецификации

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

Совместимость с браузерами

Смотрите также

background-blend-mode