mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。

そもそもブレンドモードとは？

ブレンドモードは、クリエイティブな表現を作るうえでの基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、Figmaなどのデザインツールにも搭載されています。ツールによって名称や選択肢、グループ内での合成方法は異なりますが、レイヤーを重ねたときの見え方を制御する考え方は共通しています。本記事ではCSSの名称にあわせてブレンドモードと記載しています。

CSSブレンドモードを試してみよう

CSSブレンドモードを試すことのできるデモを作成しました。左のドロップダウンメニューからmix-blend-modeの値を変化できるので、表示の違いを確かめてみてください。右上のチェックボックスをオンにすると、画像と重ね合わせるレイヤーの関係も確認できます。

• 別ウインドウでデモを開く
• ソースコードを開く

※このデモはVue 3を使って作成しており、オープンソースとして公開しています。もともとは2015年にAngularJS + TypeScriptで作成していましたが、2022年にVue 3で作り直しています。

mix-blend-modeの使い方

簡単なHTMLとCSSで使い方を説明します。

このプロパティは2つの要素が重なったときの見え方の指定となるので、事前準備として2つ以上のDOM要素を用意して、それぞれを絶対座標を利用して重ねて配置しましょう。z-index的に上位の要素にmix-blend-modeを指定します。コードで書くと次の指定となります。

.text {
  position: absolute;
  mix-blend-mode: overlay; /* オーバーレイを指定 */
  color: white;
  font-size: 150px;
  font-weight: bold;
  top: 200px;
  left: 30px;
}

<div class="box">
  <img src="imgs/photo.jpg" width="960" height="640" alt="" />
</div>

<div class="text">Cherry<br />Blossoms</div>

このコードを試すと、次のような表示結果となります。テキストが写真とかさなり、美しいタイポグラフィーとして表示されています。

• サンプルを別窓で開く
• ソースコードを開く

ブレンドモードのチートシート

ブレンドモードに指定できる効果にはたくさんの種類があるので、それぞれを紹介します。CSSブレンドモードのチートシートとしてお役立てください。重ねているのは次の2枚の画像で、下位レイヤーに写真が、上位レイヤーにアンビエントのグラフィックを配置しています。上位レイヤーにのみCSSブレンドモードを適用しています。

暗い効果が得られるCSSブレンドモード

明るい効果が得られるCSSブレンドモード

明暗両方の効果が得られるCSSブレンドモード

差分が得られるCSSブレンドモード

色をベースにしたCSSブレンドモード

クロスフェードに役立つCSSブレンドモード

plus-lighterは他のブレンドモードとは用途が異なり、クロスフェード効果で役立つ指定です。このプロパティーが必要になる場面について、前提から紹介します。

ブレンドモードnormalだと、2要素の透明度を0→1と1→0へ同時にトランジションさせると、途中で2要素がともに0.5の透明度になります。そのとき、両方が透けた状態になるので、表示結果として違和感が生まれることがあります。

plus-lighterは2要素がクロスフェードする場合に不透明度が考慮された状態で合成されるので、結果的にクロスフェードが綺麗に表示されます。

近年の実用例として、View Transition APIのデフォルトのクロスフェードでもplus-lighterが使われています。View Transition APIでは、遷移前後のスナップショットを重ねて不透明度を変化させます。このときmix-blend-mode: plus-lighter;を利用することで、画面全体が暗く沈むような違和感を抑え、自然なクロスフェードを実現しています。詳しくは記事『View Transitions API入門』も参考ください。

デモを用意しているので確認ください。

▲左側がnormalで、右側がplus-lighterの結果。

• 別ウインドウでデモを開く
• ソースコードを開く

期待どおりに混ざらないときはisolation: isolateを使う

mix-blend-modeは、対象要素の背後にある表示内容と合成されます。そのため、意図していない背景や親要素まで合成対象になり、見た目が変わることがあります。合成する範囲を限定したい場合は、親要素にisolation: isolate;を指定して、新しい重ね合わせコンテキスト（スタッキングコンテキスト）を作成します。

.blend-group {
  isolation: isolate;
  position: relative;
}

.blend-group__item {
  mix-blend-mode: screen;
}

対応ブラウザ

mix-blend-modeプロパティは、Chrome 41（2015年3月）、Edge 79（2020年1月）、Safari 8（2014年10月）、Firefox 32（2014年9月）以上で利用可能です。

値のplus-lighterは、Chrome 100（2022年3月）、Edge 100（2022年4月）、Safari 9.1（2016年3月）、Firefox 99（2022年4月）以上で利用可能です。

参照：Can I use…、Can I use… - mix-blend-mode: plus-lighter

まとめ：デザイナーとHTMLコーダーが協力しあえる

2010年代のウェブ制作においては、ブレンドモードとHTMLは相性が悪いものでした。マークアップエンジニアの中には、デザイナーが作成したPhotoshop等のデザインデータに描画モードがこっそり使われているのを見つけて、ため息をついた方も多いでしょう。Photoshopの描画モードの見栄えを損なわないためにも、レイヤーの結合やスライスの切り方を工夫し、苦労していたのではないでしょうか？

でも今はほとんどのブラウザでmix-blend-modeが使えるので、ブレンドモードをデザインソフトで利用したり、ウェブページにコーディングするのも容易になりました。

続編記事「CSSのmix-blend-modeで実現するドローイング表現」では、mix-blend-modeを使ったウェブのインタラクションデザインの表現手法を紹介します。HTMLのcanvas要素やvideo要素を組み合わせると表現方法が広がるという事例を紹介しています。

補足：background-blend-mode との違いは

mix-blend-modeに似たプロパティとして、background-blend-modeがあります。background-blend-modeは、要素に指定した複数の背景画像同士、または背景画像と背景色を合成するためのCSSプロパティです。要素の外側にあるコンテンツとは合成されません。要素そのものやテキスト、画像、SVGなどを背景と合成したい場合は、mix-blend-modeを使います。