CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。デザイナー、コーチ、ディレクター / いがわ

.

Memo

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

CSSブレンドモード。

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

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

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


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

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

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

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

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

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要素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-->

petsmix-blend-mode

以下、上記のHTMLへ、CSSのmix-blend-modeを適用させた結果の一覧。

normal(通常)。

CSS

見やすくするために、画像とテキストの位置は別途のCSSで指定しています。)
ブラウザがダークモードの場合、文字色はダークモードが優先されることがあります。)

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

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

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

normal
(通常)

CSSブレンドモード。

normal
(通常)

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

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

normal(通常)

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

multiply(乗算)。

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

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

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

multiply
(乗算)

CSSブレンドモード。

multiply
(乗算)

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

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

multiply(乗算)

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

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

screen(スクリーン)。

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

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

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

screen
(スクリーン)

CSSブレンドモード。

screen
(スクリーン)

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

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

screen(スクリーン)

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

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

overlay(オーバーレイ)。

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

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

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

overlay
(オーバーレイ)

CSSブレンドモード。

overlay
(オーバーレイ)

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

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

overlay(オーバーレイ)

darken(暗く)。

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

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

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

darken
(暗く)

CSSブレンドモード。

darken
(暗く)

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

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

darken(暗く)

lighten(明るく)。

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

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

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

lighten
(明るく)

CSSブレンドモード。

lighten
(明るく)

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

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

lighten(暗く)

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

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

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

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

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

CSSブレンドモード。

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

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

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

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

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

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

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

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

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

CSSブレンドモード。

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

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

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

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

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

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

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

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

hard-light
(ハードライト)

CSSブレンドモード。

hard-light
(ハードライト)

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

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

hard-light(ハードライト)

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

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

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

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

soft-light
(ソフトライト)

CSSブレンドモード。

soft-light
(ソフトライト)

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

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

soft-light(ソフトライト)

difference(差の絶対値)。

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

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

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

difference
(差の絶対値)

CSSブレンドモード。

difference
(差の絶対値)

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

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

difference(差の絶対値)

exclusion(除外)。

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

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

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

exclusion
(除外)

CSSブレンドモード。

exclusion
(除外)

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

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

exclusion(除外)

hue(色相)。

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

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

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

hue
(色相)

CSSブレンドモード。

hue
(色相)

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

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

hue(色相)

saturation(彩度)。

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

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

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

saturation
(彩度)

CSSブレンドモード。

saturation
(彩度)

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

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

saturation(彩度)

color(カラー)。

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

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

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

color
(カラー)

CSSブレンドモード。

color
(カラー)

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

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

color(カラー)

luminosity(輝度)。

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

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

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

luminosity
(輝度)

CSSブレンドモード。

luminosity
(輝度)

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

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

luminosity(輝度)


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

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

順番はわかりやすいように便宜上に付与。特に決まりはない。)

  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; (輝度)

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


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

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

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

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

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

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

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


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

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

免責事項について

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