Photoshop、Figmaなどのデザインツールでは描画モードを変更することで特定のレイヤーに対して乗算やオーバーレイなどの視覚効果を付与できますが、ブラウザ上でもCSSのmix-blend-modeを使うことで似たような見え方を再現することが可能です。

最近よく見る主な用途としては、例えば固定画像の上にオーバーレイをかけた文字を重ねたり、スクロールに追従するヘッダーに対して「差の絶対値（差異 / 差分）」を当てることで背景色と反転した色にするなどがあります。（kajimaruno noteのヘッダーもmix-blend-modeを採用しています）

このCSSのmix-blend-modeという機能は2014年頃（諸説あり）から各ブラウザに順次実装されはじめ、現在ではChrome / Firefox / Safari / Edgeなどの主要ブラウザには概ね実装されていますが、それまでのPhotoshopの描画モードは多くのコーダーを悩ませてきた機能でもあります。

当時支給されたPSDデータ内でこっそり「乗算」「オーバーレイ」が使われているレイヤーを見付けたときの精神的疲労感も今となってはいい思い出ですが、長年コーディングをしている人の中には未だに拒否反応をしめす人もいるかもしれません。

何はともあれ、現在ではほとんどのブラウザでブレンドモードを再現することができるようになりました。

とは言え、デザインツールとブラウザでは、レイヤーの重なり方やブレンドの適用範囲などの仕組みが異なるため、同じ効果を適用しても見え方が変わってしまうことがあったり、使用しているカラープロファイルや色空間によっても、色味に差が出る場合があります。

CSSでは適用範囲が異なる

デザインツールでは、指定したレイヤー単位で効果がかかるのに対し、CSSのmix-blend-modeでは指定した要素の描画結果が背後の要素とブレンドされるため、子要素を含む構造によっては意図しない表示になることがあります。

例えば、デザインにおいてヘッダー要素全体に一律で効果を当てる場合であればブラウザとの見え方の差はそれほど生じませんが、「ヘッダーの一部（ハンバーガーメニューの中など）は効果を外す」となると少し話が変わってきます。

この場合、効果を適用する要素を個別に指定したり、HTML上で要素を分離したりする必要があるため、コーディングでは少し厄介な作業になります。

例として、以下のようなデザインのサイトを考えているとします。（オレンジ色の吹き出し部分はクリックした際に表示されるサブメニュー想定）

ヘッダー部分をスクロール追従にする場合、ファーストビューの段階では視認性を担保できていますが、ABOUTの領域までスクロールすると背景色と同化しまってロゴと文字が見えなくなってしまいます。（下記、「A. デフォルト」）

A. デフォルト

これを、ヘッダーに対してmix-blend-modeを適用すると下記のように背景色に応じて色を反転させることができます。（下記、「B. 追従ヘッダーに対してmix-blend-modeを適用」）

B. 追従ヘッダーに対してmix-blend-modeを適用

ただ、この場合はヘッダー全体に対してブレンドモードがかかってしまうため、内包しているサブメニューも色が反転してしまっています。

もし、これに対して下記のように「サブメニューのオレンジ色を維持」という仕様とする場合、コーディングとしては少し複雑になります。

C. ヘッダー内のロゴとナビゲーションに個別にmix-blend-modeを適用

以下にBとC、それぞれのコーディングの考え方を図にしてみました。

コーダー視点だと、Cの実装はHTMLの構造的に違和感があったり、個々の要素に同じCSSを当てることに非効率さを感じたりするので、個人的には苦手意識があります。（mix-blend-modeは思い通りの結果にならないことも多いので検証が地味に大変だったり……）

総論

• ブレンド効果を使ったデザインの再現は、ある程度可能。
• まとまった要素の中でブレンド効果の有無を分けると、構造やCSSが複雑になり、意図しない表示が起きたときに原因を追いにくくなる。
• できれば、要素全体にまとめてブレンド効果を適用できるデザインが望ましい。

ブレンドを使ったデザインを検討しているデザイナーや、ブレンドを使った実装に悩んでいるコーダーの参考になれば幸いです。