CSS:mix-blend-modeで快適ブレンド

2023.02.20 : Yamamoto Naoki

Coding

mix-blend-modeは、CSSのプロパティで、要素が重なったときに重なった部分の色をどのように混ぜ合わせるかを指定することができます。つまり、異なる要素同士が重なったときに、その色の混ぜ方を指定することができます。

mix-blend-modeは、ブレンディングモードとも呼ばれ、写真編集ソフトでよく使用されるレイヤースタイルに似た効果をCSS上で実現することができます。

mix-blend-modeの設定

mix-blend-modeの値は、ブレンディングモードを表すキーワードで指定されます。以下に、代表的な値を紹介します。

normal：デフォルトのブレンディングモードで、要素同士を通常通りに重ね合わせます。
multiply：色を掛け合わせるように混ぜ合わせます。
screen：色をスクリーン効果のように混ぜ合わせます。
overlay：色をオーバーレイのように混ぜ合わせます。
color-dodge：色を覆いかぶさるように混ぜ合わせます。
color-burn：色を焼きつくすように混ぜ合わせます。
hard-light：色をハードライトのように混ぜ合わせます。
soft-light：色をソフトライトのように混ぜ合わせます。
difference：色の差分を求めて混ぜ合わせます。
exclusion：色を除外するように混ぜ合わせます。
hue：色相を重ね合わせます。
saturation：彩度を重ね合わせます。
color：色を重ね合わせます。
luminosity：明度を重ね合わせます。

mix-blend-modeの例

.box {
  background-color: red;
  mix-blend-mode: multiply;
}

.overlay {
  background-color: blue;
  mix-blend-mode: screen;
}

上記の例では、.boxクラスの要素には、赤色の背景色が指定され、mix-blend-modeがmultiplyに設定されています。一方、.overlayクラスの要素には、青色の背景色が指定され、mix-blend-modeがscreenに設定されています。これらの要素が重なった場合、赤色と青色が掛け合わされ、黒色に近い色合いになります。