ホームへ

CSSで乗算などができるmix-blend-modeの使い方

イラストレーターやフォトショップでおなじみの「合成モード」、実はCSSでも実現できるんです。

CSSで乗算などができるmix-blend-modeの使い方を解説します。

mix-blend-modeの使い方

mix-blend-modeは重なった色を合成できるCSSです。イラストレーターやフォトショップをお使いの方は「合成モード」などでおなじみの機能です。

帯の色を背景に応じた濃さにしたり、写真を濃く・明るくするときなどに使います。

mix-blend-modeは主に画像(img)や背景色を指定したdivなどに指定します。

img{mix-blend-mode:multiply}

mix-blend-modeはIEでは効きませんが、IEのサポートが切れる今ならもう使っていいでしょう。

mix-blend-modeの値一覧

下記は同じ画像を重ねて上の画像に「乗算」などを指定した例です。

通常:normal
乗算:multiply
スクリーン:screen
オーバーレイ:overlay
覆い焼き:color-dodge
焼き込み:color-burn
比較(暗):darken
比較(明):lighten
ハードライト:hard-light
ソフトライト:soft-light
差の絶対値:difference
除外:exclusion
色相:hue
彩度:saturation
カラー:color
輝度:luminosity

※「差の絶対値」が真っ黒なのは同じ画像(同じ色)を重ねているためです。

よく使う値と強さの変更

mix-blend-modeの値は16種類ありますが、実際使うのはこれから紹介する3つ程度でしょう。

mix-blend-modeの強さを弱めるには「opacity」で透明度を調整しましょう。

もっと強くするには同じ画像を複数重ねて同じ値の「mix-blend-mode」を指定しましょう。

【暗くしたいとき】乗算:multiply

「mix-blend-mode:multiply」を指定すると写真を暗くできます。

暗すぎるときはopacityを指定して弱くしましょう。0で元の写真になります。

opacity:0(透明)
opacity:33%(透明度66%)
opacity:66%(透明度33%)
opacity:100%(不透明)

【明るくしたいとき】スクリーン:screen

「mix-blend-mode:screen」を指定すると写真を明るくできます。

明るすぎるときはopacityを指定して弱くしましょう。0で元の写真になります。

opacity:0(透明)
opacity:33%(透明度66%)
opacity:66%(透明度33%)
opacity:100%(不透明)

【コントラストを強くしたいとき】オーバーレイ:overlay

「mix-blend-mode:overlay」を指定すると写真のコントラストを強くできます。

強すぎるときはopacityを指定して弱くしましょう。0で元の写真になります。

opacity:0(透明)
opacity:33%(透明度66%)
opacity:66%(透明度33%)
opacity:100%(不透明)

【まとめ】mix-blend-modeの使い方

主に画像(img)や背景色を指定したdivなどに指定する

img{mix-blend-mode:multiply}

よく使う値

  • 【暗くしたいとき】乗算:multiply
  • 【明るくしたいとき】スクリーン:screen
  • 【コントラストを強くしたいとき】オーバーレイ:overlay

強さを弱めるには「opacity」で透明度を調整

強くするには同じ画像を複数重ねて同じ値の「mix-blend-mode」を指定

以上、mix-blend-modeの使い方でした。

マンガで読める関連記事