【CSS】mix-blend-modeを使ってみる

2025年3月16日

デザインカンプでブレンドモードってあるけど何だろう…？

というわけで今回は、「mix-blend-mode」についてご紹介いたします。

ブレンドモードとは？

ブレンドモードは、色んなデザインソフト（Photoshop・Illustrator・XD・Figma等々）で搭載されている
レイヤーを重ねたときにどのように重ねて表示するかの設定になります。

使用するソフトによって「ブレンドモード」「描画モード」などと表記されていますが、
機能としては同じものになります。

figmaではこんな感じで表示されています↓

このブレンドモードをcssで設定しないと、カンプと見た目が変わってしまいます。

mix-blend-modeの使い方

mix-blend-modeは、2つの要素が重なったときの見え方の指定になります。
指定できる効果は割とたくさんあるので、それぞれご紹介いたします！

暗い効果が得られるmix-blend-mode

■比較(暗)　　・・・　darken　　上下の画像を比較して暗いピクセルが表示される
■乗算　　　・・・　multiply　　暗い表現を作るときに使う
■焼き込み　・・・　color-burn　乗算よりも暗くなる

See the Pen ブレンドモード① by そす (@Sosgoyo) on CodePen.

ご紹介した順番に例を載せています。背景と文字は同じ色（skyblue）にしております。

明るい効果が得られるmix-blend-mode

■比較（明）　・・・　lighten　　　下の画像を比較して明るいピクセルが表示される
■スクリーン・・・　screen　　　明るい表現を作るときに使う。かなり使える
■覆い焼き　・・・　color-dodge　スクリーンよりもより明るくなる。

See the Pen ブレンドモード② by そす (@Sosgoyo) on CodePen.

背景色はblue。文字色はskyblueにしております。

明暗両方の効果が得られるmix-blend-mode

■オーバーレイ　・・・　overlay　　　乗算とスクリーンの両方に近い効果が得られる。
■ソフトライト・・・　soft-light　　　明るい部分はさらに明るく、暗い部分はされに暗くする
■ハードライト・・・　hard-light　　　ソフトライトよりも強い効果が得られる

See the Pen ブレンドモード② by そす (@Sosgoyo) on CodePen.

背景色はblue。文字色はskyblueにしております。

差分が得られるmix-blend-mode

■差分　・・・　difference　　　二枚の画像の違いを可視化するのに役立つ
■除外　・・・　exclusion　　　差の絶対値よりも弱い効果が得られる

See the Pen ブレンドモード③ by そす (@Sosgoyo) on CodePen.

背景色はblue。文字色はskyblueにしております。

色をベースにしたmix-blend-mode

■色相　・・・　hue　　　下位レイヤーの輝度と彩度、上位レイヤーの色相を持つカラーが得られる
■彩度　・・・　saturation　下位レイヤーの輝度と色相、上位レイヤーの彩度を持つカラーが得られる
■カラー・・・　color　　　下位レイヤーの輝度、上位レイヤーの彩度と色相を持つカラーが得られる
■輝度　・・・　luminosity　下位レイヤーの彩度と色相、上位レイヤーの輝度を持つカラーが得られる

See the Pen ブレンドモード④ by そす (@Sosgoyo) on CodePen.

背景色はblue。文字色はskyblueにしております。