mix-blend-mode

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

構文

/* キーワード値 */
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;

値

<blend-mode>
適用する混合モードを表す <blend-mode> です。

形式文法

<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

例

HTML の例

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
.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; /* Without isolation, the background color will be taken into account */
  position: relative;
}

SVG の例

This example reproduces the previous example using SVG.

<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; } /* Without isolation, the background color will be taken into account */

仕様書

仕様書 状態 備考
Compositing and Blending Level 1
mix-blend-mode の定義		 勧告候補 初回定義
初期値normal
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類個別
重ね合わせコンテキストの生成あり

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mix-blend-modeChrome 完全対応 41Edge 完全対応 79Firefox 完全対応 32IE 未対応 なしOpera 完全対応 28Safari 完全対応 8WebView Android 完全対応 41Chrome Android 完全対応 41Firefox Android 完全対応 32Opera Android 完全対応 28Safari iOS 完全対応 8Samsung Internet Android 完全対応 4.0
On SVG elementsChrome 完全対応 41Edge 完全対応 79Firefox 完全対応 32IE 未対応 なしOpera 完全対応 28Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 32Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報