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.

mix-blend-mode は CSS のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

試してみましょう

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: revert;
mix-blend-mode: unset;

値

: 適用する混合モードを表すです。

公式定義

初期値	`normal`
適用対象	すべての要素
継承	なし
計算値	指定通り
アニメーションの種類	アニメーション不可
重ね合わせコンテキストの生成	あり

形式文法

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

例

mix-blend-mode の様々な値の効果


  
    
      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 での mix-blend-mode の使用

HTML

html

CSS

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 での mix-blend-mode の使用

SVG