レンちゃんとペンタ

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

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

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

この記事で分かること

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

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

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

    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