mix-blend-modeで乗算やオーバーレイなどのブレンドモードを使う方法【CSS】

コーディングの際に、デザインに「乗算」や「スクリーン」などのブレンドモードが使用されていて悩んだ方も多いのではないでしょうか。
以前までは再現できず、画像として書き出しをしたりしていた時期もありましたが、今はIEや古いバージョン以外のモダンブラウザはCSSのブレンドモードに対応していますので、mix-blend-modeが使用可能となりました。

ブレンドモードとは

ブレンドモードとは、レイヤーを重ねた際にどのように合わせて表示するかの設定になります。
PhotoshopやIllusrator、XDやFigmaなどを使用している方には馴染みのあるものになるかと思いますが、「ブレンドモード」や「描画モード」を表現されているものになります。これをCSSのmix-blend-modeで表現する事が可能です。

mix-blend-modeについて

mix-blend-modeはCSS3で使えるようになったプロパティで、名前通り、ブレンドモードを表現するためのプロパティです。重なる要素(上に乗る要素)に対して指定します。
指定できる値は16種類ありますので下記にまとめてました。

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

mix-blend-modeの使い方と使用例

まずは使用例として、画像の中央に背景色付きのテキストを配置し、テキストにmix-blend-mode: normal;を指定したレイアウトを作成します。

<div class="sample">
    <figure><img src="image.jpg" alt=""></figure>
    <p class="text">CDG<br>現役エンジニアの備忘録ブログ</p>
</div>

.sample {
    position: relative;
}
figure {
    width: 100%;
    height: 300px;
    display: block;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    width: 80%;
    padding: 30px 20px;
    background-color: #4D98BF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: normal;
}

CDG
現役エンジニアの
備忘録ブログ

mix-blend-modeをnormalで配置したテキストを、normal以外の値を指定してどのようになるか、使用例としてよく使いそうなものをいくつか掲載いたします。

乗算(multiply)

.text {
    mix-blend-mode: ;
}

CDG
現役エンジニアの
備忘録ブログ

スクリーン(screen)

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

CDG
現役エンジニアの
備忘録ブログ

オーバーレイ(overlay)

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

CDG
現役エンジニアの
備忘録ブログ

覆い焼き(color-dodge)

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

CDG
現役エンジニアの
備忘録ブログ

焼き込み(color-burn)

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

CDG
現役エンジニアの
備忘録ブログ

ハードライト(hard-light)

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

CDG
現役エンジニアの
備忘録ブログ

ソフトライト(soft-light)

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

CDG
現役エンジニアの
備忘録ブログ

今回は背景色含むテキストにmix-blend-modeを指定していますが、背景とテキストを分けると背景だけにブレンドモードを指定する事も可能です。

さいごに

いかがでしたでしょうか。
簡単に解説しましたが、mix-blend-modeはいろいろと応用が出来るものとなります。CSSでのブレンドモード(mix-blend-mode)を出来るようになると、コーディングの幅も広がりますので、使い方をしっかりと覚えておきましょう。