【CSS】mix-blend-mode の使い方｜要素を重ねて色を合成（ブレンド）する方法

写真の上に置いた文字を背景となじませたり、色の付いた図形を重ねて混色させたり――こうした「重なった部分で色を合成する」表現を、画像編集ソフトを使わず CSS だけで実現できるのが mix-blend-mode プロパティです。この記事では、mix-blend-mode の基本的な使い方から代表的な値の効果、よく使う実例、そして「効かない」ときの原因まで、動かせるデモを交えて初心者の方にもわかるように解説します。

mix-blend-mode は要素の「混ざり方」を決めるプロパティ

mix-blend-mode は、ある要素の色をその下に重なっている要素の色とどう混ぜ合わせるかを指定するプロパティです。Photoshop などの「描画モード（ブレンドモード）」を知っている方なら、それと同じ考え方だと思ってください。指定した要素と背後の要素が重なった部分で、色が計算されて合成されます。

基本の書き方は、混ぜたい要素にプロパティを1行足すだけです。

.title {
  /* 背後の要素と「乗算」で色を合成する */
  mix-blend-mode: multiply;
}

初期値は normalで、これは合成をしない（背後を透かさず、そのまま上に乗せる）通常の状態です。multiply や screen といった値に変えると、重なりの色が混ざり始めます。

代表的な値と効果

値はたくさん用意されていますが、まずは使用頻度の高いものを押さえれば十分です。ざっくり「暗くする系」「明るくする系」「差を取る系」と分けて覚えると選びやすくなります。

下のデモは、3つの円を重ねて mix-blend-mode: multiply を指定したものです。円が重なった部分で赤・青・黄が乗算合成され、暗い中間色が生まれているのがわかります。CSS タブの multiply を screen や difference に書き換えると、混ざり方がガラッと変わります。ぜひ値を差し替えて見比べてみてください。

<div class="stage">
  <div class="circle c1"></div>
  <div class="circle c2"></div>
  <div class="circle c3"></div>
</div>

.stage {
  position: relative;
  height: 220px;
  background: #ffffff;
}

.circle {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  /* 重なった部分で色が混ざり合う。multiply は乗算で暗く混色 */
  mix-blend-mode: multiply;
}

.c1 { background: #ff3b3b; top: 20px; left: 40px; }
.c2 { background: #3b7bff; top: 20px; left: 120px; }
.c3 { background: #ffd23b; top: 90px; left: 80px; }

文字を背景になじませる

よくある実用例が、写真の上に大きな見出しを重ねるケースです。写真の明るさは場所によって変わるため、ただ白や黒の文字を乗せると読みにくい部分が出てきます。ここで mix-blend-mode: difference を使うと、文字の色と背景の色の差が取られ、背景が明るくても暗くても文字が浮き上がって読めるようになります。

.hero {
  position: relative;
  background: url(photo.jpg) center / cover;
}

.hero__title {
  color: #fff;
  /* 背景写真との差を取って、どこでも読める文字にする */
  mix-blend-mode: difference;
}

difference は白と黒が反転する性質があるので、白い文字は暗い背景の上では白のまま、明るい背景の上では暗く反転して表示されます。結果としてコントラストが保たれ、写真の内容に左右されずに読ませられるわけです。

background-blend-mode との違い

名前がよく似たプロパティに background-blend-mode があります。混同しやすいので違いを整理しておきましょう。mix-blend-mode は要素どうし（ある要素と、その背後に重なる別の要素）を合成するのに対し、background-blend-mode は1つの要素の中の背景どうし（複数の background-image や背景色）を合成します。

「重ねた画像の上の文字やロゴを混ぜたい」なら mix-blend-mode、「1枚のボックスの背景画像に色を重ねて着色したい」なら background-blend-mode、と目的で選び分けます。

合成が効かない・意図しない結果になるとき

背後に混ぜる相手がいない

mix-blend-mode は「背後の要素と混ぜる」プロパティなので、後ろに重なっている要素が無ければ何も起こりません。たとえば要素が親のまっさらな白背景の上に単独で置かれているだけだと、混色する相手がいないため変化が見えません。図形や画像を実際に重ねて配置しているか確認してください。

親に isolation や不透明度の指定がある

合成の範囲は「同じ重ね合わせのグループ（スタッキングコンテキスト）」の中に限られます。親要素に isolation: isolate が指定されていると、その中の要素は外側の背景とは混ざらなくなります。これは逆に「ここから先は混ぜたくない」という合成を止めたいときに使えるプロパティでもあります。意図せず合成が止まる場合は、親の isolation や、opacity・transform・filter など新しいスタッキングコンテキストを作る指定がないか見直しましょう。

白や黒がそのまま残る

「混ぜたはずなのに真っ白（真っ黒）のまま」というときは、値の性質を思い出してください。multiply では白い部分は背後を透かして変化せず、screen では黒い部分が変化しません。これは不具合ではなく各モードの計算どおりの結果です。狙った混色にならないときは、要素の色そのものを変えるか、別の値を試すと解決することが多いです。

まとめ

mix-blend-mode は、要素を重ねた部分の色を背後の要素と合成するプロパティです。暗くする multiply、明るくする screen、差を取る difference など値を選ぶだけで、画像編集ソフトのような混色表現を CSS だけで作れます。写真の上の文字を読みやすくしたり、図形を重ねてグラフィカルに見せたりと用途は幅広く、背景どうしを混ぜる background-blend-mode と使い分けるのがポイントです。合成が効かないときは、背後に相手がいるか、親で合成が止められていないかを確認してみてください。

参考ページ

• mix-blend-mode – CSS: カスケーディングスタイルシート | MDN
• background-blend-mode – CSS: カスケーディングスタイルシート | MDN
• isolation – CSS: カスケーディングスタイルシート | MDN