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

.

Memo

CSSブレンドモード。乗算をmix-blend-modeで。

広告について。

サイト運営のため、Googleアドセンス
による広告があります。

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

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

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

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要素2つとと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
(通常)

CSSブレンドモード。

normal
(通常)

ブレンドモード:normal(通常)

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

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

normal(通常)

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


multiply(乗算)。

CSS
.multiply {
 mix-blend-mode: multiply;
}
mix-blend-mode:multiply(乗算)

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

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

multiply
(乗算)

CSSブレンドモード。

multiply
(乗算)

ブレンドモード:multiply(乗算)

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

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

multiply(乗算)

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

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


screen(スクリーン)。

CSS
.screen {
 mix-blend-mode: screen;
}
mix-blend-mode:screen(スクリーン)

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

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

screen
(スクリーン)

CSSブレンドモード。

screen
(スクリーン)

ブレンドモード:screen(スクリーン)

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

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

screen(スクリーン)

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

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


overlay(オーバーレイ)。

CSS
.overlay {
 mix-blend-mode: overlay;
}
mix-blend-mode:overlay(オーバーレイ)

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

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

overlay
(オーバーレイ)

CSSブレンドモード。

overlay
(オーバーレイ)

ブレンドモード:overlay(オーバーレイ)

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

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

overlay(オーバーレイ)


darken(暗く)。

CSS
.darken {
 mix-blend-mode: darken;
}
mix-blend-mode:darken(暗く)

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

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

darken
(暗く)

CSSブレンドモード。

darken
(暗く)

ブレンドモード:darken(暗く)

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

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

darken(暗く)


lighten(明るく)。

CSS
.lighten {
 mix-blend-mode: lighten;
}
mix-blend-mode:lighten(明るく)

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

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

lighten
(明るく)

CSSブレンドモード。

lighten
(明るく)

ブレンドモード:lighten(明るく)

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

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

lighten(暗く)


color-dodge(覆い焼き カラー)。

CSS
.color-dodge {
 mix-blend-mode: color-dodge;
}
mix-blend-mode:color-dodge(覆い焼き カラー)

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

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

color-dodge
(覆い焼き カラー)

CSSブレンドモード。

color-dodge
(覆い焼き カラー)

ブレンドモード:color-dodge(覆い焼き カラー)

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

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

color-dodge(覆い焼き カラー)


color-burn(焼き込み カラー)。

CSS
.color-burn {
 mix-blend-mode: color-burn;
}
mix-blend-mode:color-burn(焼き込み カラー)

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

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

color-burn
(焼き込み カラー)

CSSブレンドモード。

color-burn
(焼き込み カラー)

ブレンドモード:color-burn(焼き込み カラー)

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

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

color-burn(焼き込み カラー)


hard-light(ハードライト)。

CSS
.hard-light {
 mix-blend-mode: hard-light;
}
mix-blend-mode:hard-light(ハードライト)

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

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

hard-light
(ハードライト)

CSSブレンドモード。

hard-light
(ハードライト)

ブレンドモード:hard-light(ハードライト)

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

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

hard-light(ハードライト)


soft-light(ソフトライト)。

CSS
.soft-light {
 mix-blend-mode: soft-light;
}
mix-blend-mode:soft-light(ソフトライト)

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

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

soft-light
(ソフトライト)

CSSブレンドモード。

soft-light
(ソフトライト)

ブレンドモード:soft-light(ソフトライト)

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

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

soft-light(ソフトライト)


difference(差の絶対値)。

CSS
.difference {
 mix-blend-mode: difference;
}
mix-blend-mode:difference(差の絶対値)

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

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

difference
(差の絶対値)

CSSブレンドモード。

difference
(差の絶対値)

ブレンドモード:difference(差の絶対値)

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

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

difference(差の絶対値)


exclusion(除外)。

CSS
.exclusion {
 mix-blend-mode: exclusion;
}
mix-blend-mode:exclusion(除外)

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

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

exclusion
(除外)

CSSブレンドモード。

exclusion
(除外)

ブレンドモード:exclusion(除外)

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

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

exclusion(除外)


hue(色相)。

CSS
.hue {
 mix-blend-mode: hue;
}
mix-blend-mode:hue(色相)

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

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

hue
(色相)

CSSブレンドモード。

hue
(色相)

ブレンドモード:hue(色相)

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

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

hue(色相)


saturation(彩度)。

CSS
.saturation {
 mix-blend-mode: saturation;
}
mix-blend-mode:saturation(彩度)

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

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

saturation
(彩度)

CSSブレンドモード。

saturation
(彩度)

ブレンドモード:saturation(彩度)

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

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

saturation(彩度)


color(カラー)。

CSS
.color {
 mix-blend-mode: color;
}
mix-blend-mode:color(カラー)

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

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

color
(カラー)

CSSブレンドモード。

color
(カラー)

ブレンドモード:color(カラー)

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

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

color(カラー)


luminosity(輝度)。

CSS
.luminosity {
 mix-blend-mode: luminosity;
}
mix-blend-mode:luminosity(輝度)

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

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

luminosity
(輝度)

CSSブレンドモード。

luminosity
(輝度)

ブレンドモード:luminosity(輝度)

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

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

luminosity(輝度)


plus-darker(合成演算子を用いた混合)。

CSS
.plus-darker {
 mix-blend-mode: plus-darker;
}
mix-blend-mode:plus-darker(ブラスダーカー)

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

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

plus-darker
(ブラスダーカー)

CSSブレンドモード。

plus-darker
(ブラスダーカー)

ブレンドモード:plus-darker(合成演算子を用いた混合)

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

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

plus-darker


plus-lighter(合成演算子を用いた混合)。

CSS
.plus-lighter {
 mix-blend-mode: plus-lighter;
}
mix-blend-mode:plus-lighter(ブラスライター)

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

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

plus-lighter
(ブラスライター)

CSSブレンドモード。

plus-lighter
(ブラスライター)

ブレンドモード:plus-lighter(plus-lighter)

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

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

plus-lighter(plus-lighter)


CSSブレンドモード(mix-blend-mode)の一覧。

mix-blend-modeの種類。

mix-blend-mode。

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

順番は便宜上、付与したもの。)

  1. mix-blend-mode: normal; (通常)
  2. mix-blend-mode: multiply; (乗算)
  3. mix-blend-mode: screen; (スクリーン)
  4. mix-blend-mode: overlay; (オーバーレイ)
  5. mix-blend-mode: darken; (暗く)
  6. mix-blend-mode: lighten; (明るく)
  7. mix-blend-mode: color-dodge; (覆い焼き カラー)
  8. mix-blend-mode: color-burn; (焼き込み カラー)
  9. mix-blend-mode: hard-light; (ハードライト)
  10. mix-blend-mode: soft-light; (ソフトライト)
  11. mix-blend-mode: difference; (差の絶対値)
  12. mix-blend-mode: exclusion; (除外)
  13. mix-blend-mode: hue; (色相)
  14. mix-blend-mode: saturation; (彩度)
  15. mix-blend-mode: color; (カラー)
  16. mix-blend-mode: luminosity; (輝度)
  17. mix-blend-mode: plus-darker; (合成演算子を用いた混合)
  18. mix-blend-mode: plus-lighter; (合成演算子を用いた混合)

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


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

CSSのfilterプロパティで。

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

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

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

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

関連:CSS filter。色相・彩度・明度? filterプロパティでできること。

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

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


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

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

CSS 関連メモ。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。