デザログ

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

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

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

この記事で分かること

  • CSSで要素にブレンドモードをかける方法
  • CSSで背景にブレンドモードをかける方法

    この記事の著者

    • フリーランス
    • Webデザイナー兼UI/UXデザイナー

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

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

    こちらは、背景色をグラデーションにしてみました。
    ブレンドモードはハードライト(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らしくない演出ができるので、印象的な画面を作りたい時に役立ちそうですね。

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

    Related Posts