CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。 / メモ / いがわ

CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。

2022.11.30 2025.10.14更新。

Contents - 目次

1 描画モード、ブレンドモードとは？
2 CSSのプロパティ、mix-blend-mode。
3 CSSブレンドモード（mix-blend-mode）の実装例。
4 CSSブレンドモード（mix-blend-mode）の一覧。
5 色相・彩度・明度もCSSで。
6 CSS 関連メモ。

描画モード、ブレンドモードとは？

レイヤーの合成方法を決めるするモード。

上下のレイヤーをブレンド。

PhotoshopやIllustrator、Figmaなどのデザインツールでお馴染みの描画モードが、CSSでも使えるようになっている。

「描画モード」は英語では「Blend Mode（ブレンドモード）」であり、レイヤーとレイヤーを混ぜ合わせた表現となる。

そのように、画像やテキストなどを「ブレンド」できるのが、「mix-blend-mode」プロパティ。

CSSのプロパティ、mix-blend-mode。

mix-blend-modeのレイヤー構造。

CSSの場合は下層レイヤーに指定。

2枚（画像×テキスト）、3枚（画像×画像×テキスト）以上を重ねることも可能。

PhotoshopやFigmaの場合は上のレイヤーにブレンドを指定するが、CSSの場合は下のレイヤーに指定する。

レイヤーとは「層」のことで、例えばこの洋服が積み重なった層の中でくつろぐ愛くるしいわんちゃんみたいな感じ。わんちゃんと服自体はブレンドされないが、温度や匂いはブレンドされるだろう。

CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを！

Photo by Sdf Rahbar

CSSブレンドモード（mix-blend-mode）の実装例。

img要素とp要素をブレンド。

img要素の後のp要素にブレンドモードを指定。

例）

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;
}

mix-blend-mode：normal（通常）

画像とテキスト（画像×テキスト）のブレンドモードが「通常」の場合。

CSSブレンドモード。Photoshopのような乗算をmix-blend-modeで。

normal
（通常）

normal
（通常）

ブレンドモード：normal（通常）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「通常」の場合。

normal（通常）

normal（通常）は初期値。ブレンドはされず、２番目３番目の要素（2枚目のimgと3番目のpタグ）がそのまま上に重なる。

multiply（乗算）。

CSS

.multiply {
　mix-blend-mode: multiply;
}

mix-blend-mode：multiply（乗算）

画像とテキスト（画像×テキスト）のブレンドモードが「乗算」の場合。

multiply
（乗算）

ブレンドモード：multiply（乗算）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「乗算」の場合。

multiply（乗算）

文字通り、画像やテキストの色が掛け合わせられる。

（※今回の画像では、ちょっとだけbanksy（バンクシー）風の、壁に塗った絵のような結果になる。）

screen（スクリーン）。

CSS

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

mix-blend-mode：screen（スクリーン）

画像とテキスト（画像×テキスト）のブレンドモードが「スクリーン」の場合。

screen
（スクリーン）

ブレンドモード：screen（スクリーン）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「スクリーン」の場合。

screen（スクリーン）

白が多い画像に白いテキストなので、スクリーンでは明るくなりすぎる。

以下、それぞれのモードでの描画の結果。

overlay（オーバーレイ）。

CSS

.overlay {
　mix-blend-mode: overlay;
}

mix-blend-mode：overlay（オーバーレイ）

画像とテキスト（画像×テキスト）のブレンドモードが「オーバーレイ」の場合。

overlay
（オーバーレイ）

ブレンドモード：overlay（オーバーレイ）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「オーバーレイ」の場合。

overlay（オーバーレイ）

darken（暗く）。

CSS

.darken {
　mix-blend-mode: darken;
}

mix-blend-mode：darken（暗く）

画像とテキスト（画像×テキスト）のブレンドモードが「暗く」の場合。

darken
（暗く）

ブレンドモード：darken（暗く）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「暗く」の場合。

darken（暗く）

lighten（明るく）。

CSS

.lighten {
　mix-blend-mode: lighten;
}

mix-blend-mode：lighten（明るく）

画像とテキスト（画像×テキスト）のブレンドモードが「明るく」の場合。

lighten
（明るく）

ブレンドモード：lighten（明るく）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「明るく」の場合。

lighten（暗く）

color-dodge（覆い焼きカラー）。

CSS

.color-dodge {
　mix-blend-mode: color-dodge;
}

mix-blend-mode：color-dodge（覆い焼きカラー）

画像とテキスト（画像×テキスト）のブレンドモードが「覆い焼きカラー」の場合。

color-dodge
（覆い焼きカラー）

ブレンドモード：color-dodge（覆い焼きカラー）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「覆い焼きカラー」の場合。

color-dodge（覆い焼きカラー）

color-burn（焼き込みカラー）。

CSS

.color-burn {
　mix-blend-mode: color-burn;
}

mix-blend-mode：color-burn（焼き込みカラー）

画像とテキスト（画像×テキスト）のブレンドモードが「焼き込みカラー」の場合。

color-burn
（焼き込みカラー）

ブレンドモード：color-burn（焼き込みカラー）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「焼き込みカラー」の場合。

color-burn（焼き込みカラー）

hard-light（ハードライト）。

CSS

.hard-light {
　mix-blend-mode: hard-light;
}

mix-blend-mode：hard-light（ハードライト）

画像とテキスト（画像×テキスト）のブレンドモードが「ハードライト」の場合。

hard-light
（ハードライト）

ブレンドモード：hard-light（ハードライト）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ハードライト」の場合。

hard-light（ハードライト）

soft-light（ソフトライト）。

CSS

.soft-light {
　mix-blend-mode: soft-light;
}

mix-blend-mode：soft-light（ソフトライト）

画像とテキスト（画像×テキスト）のブレンドモードが「ソフトライト」の場合。

soft-light
（ソフトライト）

ブレンドモード：soft-light（ソフトライト）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「ソフトライト」の場合。

soft-light（ソフトライト）

difference（差の絶対値）。

CSS

.difference {
　mix-blend-mode: difference;
}

mix-blend-mode：difference（差の絶対値）

画像とテキスト（画像×テキスト）のブレンドモードが「差の絶対値」の場合。

difference
（差の絶対値）

ブレンドモード：difference（差の絶対値）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「差の絶対値」の場合。

difference（差の絶対値）

exclusion（除外）。

CSS

.exclusion {
　mix-blend-mode: exclusion;
}

mix-blend-mode：exclusion（除外）

画像とテキスト（画像×テキスト）のブレンドモードが「除外」の場合。

exclusion
（除外）

ブレンドモード：exclusion（除外）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「除外」の場合。

exclusion（除外）

hue（色相）。

CSS

.hue {
　mix-blend-mode: hue;
}

mix-blend-mode：hue（色相）

画像とテキスト（画像×テキスト）のブレンドモードが「色相」の場合。

hue
（色相）

ブレンドモード：hue（色相）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「色相」の場合。

hue（色相）

saturation（彩度）。

CSS

.saturation {
　mix-blend-mode: saturation;
}

mix-blend-mode：saturation（彩度）

画像とテキスト（画像×テキスト）のブレンドモードが「彩度」の場合。

saturation
（彩度）

ブレンドモード：saturation（彩度）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「彩度」の場合。

saturation（彩度）

color（カラー）。

CSS

.color {
　mix-blend-mode: color;
}

mix-blend-mode：color（カラー）

画像とテキスト（画像×テキスト）のブレンドモードが「カラー」の場合。

color
（カラー）

ブレンドモード：color（カラー）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「カラー」の場合。

color（カラー）

luminosity（輝度）。

CSS

.luminosity {
　mix-blend-mode: luminosity;
}

mix-blend-mode：luminosity（輝度）

画像とテキスト（画像×テキスト）のブレンドモードが「輝度」の場合。

luminosity
（輝度）

ブレンドモード：luminosity（輝度）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「輝度」の場合。

luminosity（輝度）

plus-darker（合成演算子を用いた混合）。

CSS

.plus-darker {
　mix-blend-mode: plus-darker;
}

mix-blend-mode：plus-darker（ブラスダーカー）

画像とテキスト（画像×テキスト）のブレンドモードが「plus-darker」の場合。

plus-darker
（ブラスダーカー）

ブレンドモード：plus-darker（合成演算子を用いた混合）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「plus-darker」の場合。

plus-darker

plus-lighter（合成演算子を用いた混合）。

CSS

.plus-lighter {
　mix-blend-mode: plus-lighter;
}

mix-blend-mode：plus-lighter（ブラスライター）

画像とテキスト（画像×テキスト）のブレンドモードが「plus-lighter」の場合。

plus-lighter
（ブラスライター）

ブレンドモード：plus-lighter（plus-lighter）

画像と画像とテキスト（画像×画像×テキスト）のブレンドモードが「plus-lighter」の場合。

plus-lighter（plus-lighter）

CSSブレンドモード（mix-blend-mode）の一覧。

mix-blend-modeの種類。

mix-blend-mode。

mix-blend-modeは現時点（2025年10月現在）では以下の18種類が用意されている。

（※順番は便宜上、付与したもの。）

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: plus-darker; （合成演算子を用いた混合）
mix-blend-mode: plus-lighter; （合成演算子を用いた混合）

引用元：mix-blend-mode – CSS: カスケーディングスタイルシート | MDN

色相・彩度・明度もCSSで。

CSSのfilterプロパティで。

色相・彩度・明度の調整を。

ちなみに、Photoshopで行っていた色相・彩度・明度の調整も、すでにCSSだけで可能となっている。

CSSで調整するメリットしては…

ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
などがある。

CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。