• #HTML・CSS・JavaScript

【サンプル付き】CSSだけで実装するブレンドモード(乗算とかオーバーレイとか)

乗算やオーバーレイ、スクリーンなど、画像編集アプリケーションではお馴染みの効果がスタイルシートだけで実装できます。
こうした効果、IllustratorやPhotoshopでは「描画モード」、クリスタなどでは「合成モード」などと呼ばれますが、CSSでは「ブレンドモード」と言います。

豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

mix-blend-mode：要素にブレンドモードをかける

基本の使い方

ブレンドモードを実装するためのCSSプロパティは「mix-blend-mode」です。
以下は、グラデーションの背景画像の上に、グレー（#707070）の文字を焼き込みカラー（color-burn）というブレンドモードで乗せた例です。

実装は簡単。ブレンドモードを適応したい要素にmix-blend-modeを設定するだけです。

<div class="gradBg">
  <p>Blend Mode</p>
</div>

/* グラデーションの背景画像を設定 */
.gradBg{
  background-image:url(背景画像のパス);
}

/* ブレンドモード（焼き込みカラー）を設定 */
.gradBg p{
  color:#707070;
  mix-blend-mode:color-burn;
}

ブレンドモードのバリエーション

ブレンドモードは、重ね合わせた色と選んだ効果によって大きく結果が変化します。
ここではバリエーションの記述例のみ紹介しますが、Photoshopやクリスタ等をお持ちであれば、アプリケーション上でいろいろな組み合わせをシミュレートしてみると効果がわかりやすいはずです。

続いて、mix-blend-modeを使った演出例を紹介します。

字形でマスキングしたような感じ

白背景＆黒文字の要素に対してスクリーンを適応しています。

<div class="gradBg">
  <p>Blend Mode</p>
</div>

.gradBg{
  background-image:url(グラデーション背景);
}

p{
  color:#000;
  background:#FFF;
  mix-blend-mode:screen;
}

すりガラスっぽく

こちらはtext-shadowで影を加えて、立体的に見せています。
ブレンドモードはオーバーレイ(overlay)です。

<div class="gradBg">
  <p>Blend Mode</p>
</div>

.gradBg{
  background-image:url(グラデーション背景);
}

p{
  mix-blend-mode:overlay;
  color:rgba(255, 255, 255, .7);
  text-shadow: 1px 2px 3px #000;
}

写真を重ねる

テキスト以外に、画像を合成することも可能です。

<div class="gradBg">
  <img src="画像のパス">
</div>

.gradBg{
  background-image:url(グラデーション背景);
}

img{
  mix-blend-mode:overlay;
}

↓ちなみに元々の画像はこちらです。

background-blend-mode：背景にブレンドモードをかける

「background-blend-mode」プロパティを使うと、色や画像等、複数の設定が施されている背景に対してブレンドモードをかける事ができます。

背景画像 × 背景色

background-blend-modeは、背景設定がされている要素に設定します。
以下は、背景画像（先程と同じ写真）とブルーの背景色を、スクリーン(screen)で掛け合わせた例です。

<div>Blend Mode</div>

div{
  background-blend-mode: screen;
  background-color: #2d80b1;
  background-image: url(画像のパス);
}

背景画像 × 背景色(グラデーション)

こちらは、背景色をグラデーションにしてみました。
ブレンドモードはハードライト(hard-light)。レトロな雰囲気です。

<div>Blend Mode</div>

div{
  background-blend-mode: hard-light;
  background-image: linear-gradient(to bottom, #40c7bb, #d64913), url(画像のパス);
}

背景画像 × 背景色(ボーダー)

グラデーションを工夫するとボーダーにする事ができます。走査線のような効果になりましたね。

<div>Blend Mode</div>

div{
  background-blend-mode: overlay;
  background-image:repeating-linear-gradient(#333, #333 3px, transparent 3px, transparent 6px), url(画像のパス);
}

背景画像 × 背景画像

2枚の背景画像を掛け合わせることもできます。
見た目はmix-blend-modeで紹介した例と同じ結果になります。

<div>Blend Mode</div>

div{
  background-blend-mode: overlay;
  background-image:url(葉っぱの画像), url(グラデーション画像);
}

まとめ

• 要素にブレンドモードをかける：mix-blend-mode
• 背景にブレンドモードをかける：background-blend-mode

利用頻度はあまりないかもしれませんが、CSSらしくない演出ができるので、印象的な画面を作りたい時に役立ちそうですね。

1. Home
2. 【サンプル付き】CSSだけで実装するブレンドモード(乗算とかオーバーレイとか)