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の値一覧

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

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

よく使う値と強さの変更

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

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

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

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

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

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

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

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

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

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

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

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

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

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

img{mix-blend-mode:multiply}

よく使う値

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

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

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

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