Speaking Design

Blogブログ

CSSだけで実装するブレンドモード(サンプル付き)

CSSだけで実装するブレンドモード(サンプル付き)

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

目次

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

基本の使い方

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

Blend Mode

スタイルシートだけでできてます

Blend Mode

背景画像はこんな感じです

実装は簡単。ブレンドモードを適応したい要素に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プロパティの値 対応する描画モード・合成モード
multiply 乗算
screen スクリーン
overlay オーバーレイ
darken 比較(暗)
lighten 比較(明)
color-dodge 覆い焼きカラー
color-burn 焼き込みカラー
hard-light ハードライト
soft-light ソフトライト
difference 差の絶対値
exclusion 除外
hue 色相
saturation 彩度
color カラー
luminosity 輝度

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

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

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

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)です。

Blend Mode

<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)で掛け合わせた例です。

Blend Mode
<div>Blend Mode</div>
div{
  background-blend-mode: screen;
  background-color: #2d80b1;
  background-image: url('https://speakingdesign.com/html/wp-content/themes/million/img/postImg/43/leaf.jpg');
}

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

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

Blend Mode
<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(画像のパス);
}
Blend Mode

背景画像 × 背景画像

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

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

まとめ

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

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