CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
Contents - 目次
CSSブレンドモード。
PhotoshopやFigmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。
「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。
そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。
mix-blend-modeのレイヤー構造。
2枚（画像×テキスト）、3枚（画像×画像×テキスト）以上を重ねることも可能。
PhotoshopやFigmaの場合は上のレイヤーにブレンドを指定するが、CSSの場合は下のレイヤーに指定する。
レイヤーとは「層」のことで、例えばこの洋服が積み重なった層の中でくつろぐ愛くるしいわんちゃんみたいな感じだ。わんちゃんと服自体はブレンドされないが、温度や匂いはブレンドされるだろう。
Photo by Sdf Rahbar
ブレンドモード（mix-blend-mode）の実装例。
例）
img要素の後のp要素にブレンドモードを指定する。
HTML
画像×テキストの場合。
（※img要素とp要素の計2枚をブレンド。）
<div class="blend_box">
<img src="example.jpg" alt="例">
<p class="normal">normal（通常）</p>
</div><!--blend_box-->
画像×画像×テキストの場合。
（※img要素２つととp要素の計3枚をブレンド。）
<div class="blend_box">
<img src="example.jpg" alt="例">
<img src="example_02.jpg" alt="例">
<p class="normal">normal（通常）</p>
</div><!--blend_box-->
mix-blend-mode
以下、上記のHTMLへ、CSSのmix-blend-modeを適用させた結果の一覧。
normal（通常）。
CSS
（※見やすくするために、画像とテキストの位置は別途のCSSで指定しています。）
（※ブラウザがダークモードの場合、文字色はダークモードが優先されることがあります。）
.normal {
mix-blend-mode: normal;
}
画像とテキスト（画像×テキスト）のブレンドモードが「通常」の場合。
normal
（通常）
normal
（通常）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「通常」の場合。
normal（通常）
normal（通常）は初期値。ブレンドはされず、２番目３番目の要素（2枚目のimgと3番目のpタグ）がそのまま上に重なる。
multiply（乗算）。
CSS
.multiply {
mix-blend-mode: multiply;
}
画像とテキスト（画像×テキスト）のブレンドモードが「乗算」の場合。
multiply
（乗算）
multiply
（乗算）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「乗算」の場合。
multiply（乗算）
文字通り、画像やテキストの色が掛け合わせられる。
（※今回の画像では、ちょっとだけbanksy（バンクシー）風の、壁に塗った絵のような結果になる。）
screen（スクリーン）。
CSS
.screen {
mix-blend-mode: screen;
}
画像とテキスト（画像×テキスト）のブレンドモードが「スクリーン」の場合。
screen
（スクリーン）
screen
（スクリーン）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「スクリーン」の場合。
screen（スクリーン）
白が多い画像に白いテキストなので、スクリーンでは明るくなりすぎる。
以下、それぞれのモードでの描画の結果。
overlay（オーバーレイ）。
CSS
.overlay {
mix-blend-mode: overlay;
}
画像とテキスト（画像×テキスト）のブレンドモードが「オーバーレイ」の場合。
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「オーバーレイ」の場合。
darken（暗く）。
CSS
.darken {
mix-blend-mode: darken;
}
画像とテキスト（画像×テキスト）のブレンドモードが「暗く」の場合。
darken
（暗く）
darken
（暗く）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「暗く」の場合。
darken（暗く）
lighten（明るく）。
CSS
.lighten {
mix-blend-mode: lighten;
}
画像とテキスト（画像×テキスト）のブレンドモードが「明るく」の場合。
lighten
（明るく）
lighten
（明るく）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「明るく」の場合。
lighten（暗く）
color-dodge（覆い焼き カラー）。
CSS
.color-dodge {
mix-blend-mode: color-dodge;
}
画像とテキスト（画像×テキスト）のブレンドモードが「覆い焼き カラー」の場合。
color-dodge
（覆い焼き カラー）
color-dodge
（覆い焼き カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「覆い焼き カラー」の場合。
color-dodge（覆い焼き カラー）
color-burn（焼き込み カラー）。
CSS
.color-burn {
mix-blend-mode: color-burn;
}
画像とテキスト（画像×テキスト）のブレンドモードが「焼き込み カラー」の場合。
color-burn
（焼き込み カラー）
color-burn
（焼き込み カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「焼き込み カラー」の場合。
color-burn（焼き込み カラー）
hard-light（ハードライト）。
CSS
.hard-light {
mix-blend-mode: hard-light;
}
画像とテキスト（画像×テキスト）のブレンドモードが「ハードライト」の場合。
hard-light
（ハードライト）
hard-light
（ハードライト）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ハードライト」の場合。
hard-light（ハードライト）
soft-light（ソフトライト）。
CSS
.soft-light {
mix-blend-mode: soft-light;
}
画像とテキスト（画像×テキスト）のブレンドモードが「ソフトライト」の場合。
soft-light
（ソフトライト）
soft-light
（ソフトライト）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ソフトライト」の場合。
soft-light（ソフトライト）
difference（差の絶対値）。
CSS
.difference {
mix-blend-mode: difference;
}
画像とテキスト（画像×テキスト）のブレンドモードが「差の絶対値」の場合。
difference
（差の絶対値）
difference
（差の絶対値）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「差の絶対値」の場合。
difference（差の絶対値）
exclusion（除外）。
CSS
.exclusion {
mix-blend-mode: exclusion;
}
画像とテキスト（画像×テキスト）のブレンドモードが「除外」の場合。
exclusion
（除外）
exclusion
（除外）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「除外」の場合。
exclusion（除外）
hue（色相）。
CSS
.hue {
mix-blend-mode: hue;
}
画像とテキスト（画像×テキスト）のブレンドモードが「色相」の場合。
hue
（色相）
hue
（色相）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「色相」の場合。
hue（色相）
saturation（彩度）。
CSS
.saturation {
mix-blend-mode: saturation;
}
画像とテキスト（画像×テキスト）のブレンドモードが「彩度」の場合。
saturation
（彩度）
saturation
（彩度）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「彩度」の場合。
saturation（彩度）
color（カラー）。
CSS
.color {
mix-blend-mode: color;
}
画像とテキスト（画像×テキスト）のブレンドモードが「カラー」の場合。
color
（カラー）
color
（カラー）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「カラー」の場合。
color（カラー）
luminosity（輝度）。
CSS
.luminosity {
mix-blend-mode: luminosity;
}
画像とテキスト（画像×テキスト）のブレンドモードが「輝度」の場合。
luminosity
（輝度）
luminosity
（輝度）
画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「輝度」の場合。
luminosity（輝度）
ブレンドモード（mix-blend-mode）の一覧。
mix-blend-modeは現時点（2022年11月現在）では以下の16種類が用意されている。
（※順番はわかりやすいように便宜上に付与。特に決まりはない。）
- mix-blend-mode: normal; （通常）
- mix-blend-mode: multiply; （乗算）
- mix-blend-mode: screen; （スクリーン）
- mix-blend-mode: overlay; （オーバーレイ）
- mix-blend-mode: darken; （暗く）
- mix-blend-mode: lighten; （明るく）
- mix-blend-mode: color-dodge; （覆い焼き カラー）
- mix-blend-mode: color-burn; （焼き込み カラー）
- mix-blend-mode: hard-light; （ハードライト）
- mix-blend-mode: soft-light; （ソフトライト）
- mix-blend-mode: difference; （差の絶対値）
- mix-blend-mode: exclusion; （除外）
- mix-blend-mode: hue; （色相）
- mix-blend-mode: saturation; （彩度）
- mix-blend-mode: color; （カラー）
- mix-blend-mode: luminosity; （輝度）
引用元サイト：mix-blend-mode – CSS: カスケーディングスタイルシート | MDN
色相・彩度・明度もCSSで。
ちなみに、やはりかつてはPhotoshopで行っていた色相・彩度・明度の調整も、すでにCSSだけで可能となっている。
CSSで調整するメリットしては、、、
- ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
- クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
- などがある。
関連：CSS filter。色相・彩度・明度？ filterプロパティでできること。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
