はじめに
みなさんは、背景によって追従するロゴの色が反転するサイトを見かけたことはありませんか？実は、この効果は CSS の mix-blend-mode というプロパティを使うことで簡単に実装できます。
私は最近、業務で mix-blend-mode を使う機会があったので、その基礎から注意点までを備忘録としてまとめてみました。これがお役に立てれば幸いです。
mix-blend-mode とは
MDN では下記のように説明されています。
mix-blend-mode は CSS のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。
引用：MDN Web Docs
つまり、2つの要素が重なったときに、上に重なる要素を反転させたりオーバーレイさせたりできるプロパティです。実際にデモを作りましたので、ぜひスクロールして文字の色が変化する様子を見てみてください。
See the Pen mix-blend-mode demo by Miri Inoue (@miri-inoue) on CodePen.
ブレンドモードとは
普段、Adobe製品のデザインツールをお使いの方なら馴染みがあるとおもいますが、ブレンドモードとは、Photoshop や Illustrator、XD 、Figma に搭載されている基本機能で、要素（レイヤー）と要素（レイヤー）を重ねた時にどのように表示するかを設定できるものです。ツールによって「描画モード」「ブレンドモード」と呼ばれることもありますが機能は同じです。
mix-blend-mode 効果一覧
初期値の normal を含め、合計16の値が存在します。日本語と英語の名称の違いはありますが、ほとんどのブレンドモードの効果が mix-blend-mode に対応しています。
| プロパティの値 | ブレンドモードの効果 |
|---|---|
| normal | 通常 |
| darken | 比較（暗） / 暗く |
| multiply | 乗算 |
| color-burn | 焼き込みカラー |
| lighten | 比較（明） / 明るく |
| screen | スクリーン |
| color-dodge | 覆い焼き |
| overlay | オーバーレイ |
| soft-light | ソフトライト |
| hard-light | ハードライト |
| difference | 差の絶対値 / 差分 |
| exclusion | 除外 |
| hue | 色相 |
| saturation | 彩度 |
| color | カラー |
| luminosity | 輝度 |
ブレンドモードの描画方法と主要なブレンドモードの概要
mix-blend-mode では、上の要素と下の要素をブレンドするため、各要素のRGBの数値を特定の計算方法で混ぜあわせて描画します。
Cm: ブレンド後の結果の色
B: ブレンドを行う式
Cb: 背景色
Cs: ソースカラー
詳細は仕様書をご覧ください。
normal:通常
mix-blend-mode: normal;
通常のブレンドモードで、要素同士が単純に重なります。ブレンドは行われず、上の要素が下の要素を覆います。
計算式
B(Cb, Cs) = Cs
multiply：乗算
mix-blend-mode: multiply;
上の要素と下の要素の色を掛け合わせて合成されます。元の色よりも暗い色になります。
計算式
B(Cb, Cs) = Cb x Cs
screen:スクリーン
mix-blend-mode: screen;
上の要素と下の要素の色を反転させ、掛け合わせて合成されます。元の色よりも明るい色になり、乗算の反対の効果が得られます。
計算式
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
= Cb + Cs -(Cb x Cs)
difference:差の絶対値
mix-blend-mode: difference;
明度の高い方から低い方を引いた値を適用します。反転したような色になります。
計算式
B(Cb, Cs) = | Cb - Cs |
その他の効果
各ブレンドモードはそれぞれ異なる計算方法を使用して描画されています。計算式を理解することで、要素同士がどのようにブレンドされるのか予想できるようになると、より適切なブレンドモードを選択できます。
CSS と Photoshop で違いはあるのか？
上の3つが CSS の mix-blend-mode で描画したもの、下の3つが Photoshop のブレンドモードで描画したものです。
並べてみても差がわからないくらい、同じ表現ができることがわかりました。
mix-blend-mode を使用した Web サイト
さまざまな表現ができる mix-blend-mode ですが、実際どういうところで使用されているのでしょうか？ロゴやマウスストーカーといった、要素の重なりが変化するものに使用されていることが多いようですね。
New Logo, New HANEDA.
- マウスストーカーに
mix-blend-mode: difference;
EYE OPENING LINER(アイオープニングライナー) | UZU BY FLOWFUSHI - ウズバイフローフシ
- header に
mix-blend-mode: difference;
DeNA×AI｜技術と、革新と、未来と。
- header ロゴに
mix-blend-mode: difference;
Service | RESCALAR | 株式会社リスカラ
- header ロゴ、FV、マウスストーカーに
mix-blend-mode: difference;
ブラウザサポート状況
引用：https://caniuse.com/?search=mix-blend-mode
2023年12月現在、 Chrome / Edge / Safari / Firefox でサポートされています。
以前からあったプロパティですが、IEがサポート外になったことでようやく一般的に使えるようになってきたのではないでしょうか。
mix-blend-mode の注意点
一見、簡単に扱えそうなプロパティですが、使い方を知らないとうまくきかなかったり思うような挙動にならない場合があるため、ポイントを紹介します。
スタッキングコンテキストを揃える
スタッキングコンテキストについては ICS MEDIA に詳しい記事がありましたので割愛します。
An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to.
引用：https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
要素同士がブレンドされるためには、いずれの要素も同じスタッキングコンテキストに属している必要があります。mix-blend-mode が効かない場合は HTML の構造を変えてみましょう。
mix-blend-mode が学べるサイト
全て英語になりますが、インタラクティブに学べるサイトがありましたのでご紹介します。
ページ内の Drag me をドラッグすることで、要素が重なったときにどのように表示されるのか変化を見ることができます。
まとめ
今回は、 mix-blend-mode についてまとめてみました。
以前は IE 非対応だったため、Photoshop などのデザインツールを使わないと再現できなかった表現が、CSSのプロパティで再現できるようになりました。選択するブレンドモードによって2つの要素をなじませたり、反対に目立たせてアクセントにしたり、視認性をアップできたりと、使いこなすことでさまざまな表現が実現できます。
頻出するものではないプロパティですが、頭の片隅に置いていただけると良いかと思います。
参考
CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう - ICS MEDIA
mix-blend-modeの使い方を徹底解説！重なり合う要素をオシャレに色変更！ - PENGIN BLOG
CSSで乗算がかけられる!!css3の新プロパティ「mix-blend-mode」でデザインの幅を広げよう!!
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods’ Digital Garden | コリス