【CSS】【mix-blend-mode】overlay, screenでグラデーションがいい感じになる

mix-blend-modeとは？

• CSSのプロパティ
• レイヤーを重ねる際、どう重ねるかを設定するプロパティ
• 指定できる効果がたくさんある
• 対応ブラウザ
  • https://caniuse.com/?search=mix-blend-mode

例

See the Pen mix-blend-mode-1 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

青い四角と赤い四角が重なっていて、重なった部分は2つが混ざったような紫になっています
これは青🟦 に重なる赤🟥 に mix-blend-mode: multiply; を指定しているためです。
multiplyは指定できる効果の一つで、乗算という効果があります

乗算：重なっている背景色の影響を受けて、色がより濃く暗くなる

どういう仕組みで色が計算されているかは、以下がわかりやすかったです↓

各効果の例は、MDNや以下が参考になりそうです↓

今回は全ての効果の説明はしませんが、mix-blend-modeを使ってできる表現例をご紹介します！

使用例① 単色要素に、mix-blend-modeを指定した白黒グラデーションを重ねる

単色の上に同じオブジェクトのグラデーションverを重ねて mix-blend-modeを調整していい感じにする

See the Pen mix-blend-mode-2 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

linear-gradientを用いて、単体でグラデーションを表現しても良いですが...
単純に2色指定するだけだと中間が暗くなってしまったりします。
そのため、綺麗なグラデーションにしようと思うと、色の指定を増やす必要があります

/* --- 通常のグラデーション: 3色指定 --- */
.normal-adjusted {
    background: linear-gradient(135deg, 
        #80bdff 0%,   
        #007bff 50%,  
        #003d7a 100%  
    );
}

一方 mix-blend-modeを使うグラデーションだと、以下のメリットがあります

• 1つ基準の色を決めれば、統一感のあるバリエーションを量産できる
• 複雑なカラーコードの計算が不要

/* --- mix-blend-modeの例 --- */
.blend-box-blue {
    background-color: #007bff; /* --- 基準の色 --- */

}

/* --- 基準の色に重ねる --- */
.gradient-overlay {
    /* --- 位置指定など省略 --- */
    background: linear-gradient(135deg, white, black);
    mix-blend-mode: overlay;
}

複雑な色合いのグラデーションを作る場合は、通常のグラデーションが良いかも

1色ベースのグラデーションをたくさん作りたい場合は、mix-blend-modeが役立ちそうです
gradient-overlayのようにフィルターのスタイルを一つ用意すれば、使いまわせます

---

フィルターのスタイルについて

• background: linear-gradient(135deg, white, black);
  • 左上（白）から右下（黒）に変化するグラデーション
• mix-blend-mode: overlay;
  • overlay：上に重ねる色と基準の色を比べて、暗い部分は乗算、明るい部分はスクリーンで表示される

• 乗算：重なっている背景色の影響を受けて、色がより濃く暗くなる
• スクリーン：重なっている背景色に影響を受けて、色がより明るく白くなる

つまり overlayとは、暗い部分はより濃く暗く、明るい部分はより明るく白くなり、コントラストが高くなる効果です。

そのため、中間が濁ることなく、比較的綺麗なグラデーションになっています

---

使用例② mix-blend-modeを指定したグラデーションを重ねてアニメーションさせる

複数の光の玉が動きながら色が混ざり合う＋ぼかしやノイズフィルターを活用したアニメーションです

See the Pen mix-blend-mode-3 by 加藤璃子 (@kbsovgkd-the-solid) on CodePen.

↑の埋め込んだプレビューより、手元だともう少し鮮やかに見えてます

mix-blend-modeを使っているところ

光の玉には、mix-blend-mode:screen;を指定しています。

.blob {
  position: absolute;
  width: 120vw; 
  height: 120vh;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen; 
  opacity: 0.6;
}

こちらは、前述の通り「重なっている背景色に影響を受けて、色がより明るく白くなる」効果です。
screenの指定により、少し発光しているような、濁りのない鮮やかな発色になっています

アニメーションに重なり方を変えるmix-blend-modeを組み合わせると、リッチに見えて良い感じです！

最後に

個人的にはグラデーション×ノイズ×ぼかしが大好きなので、mix-blend-mode＋アニメーション次第で見え方を変えられそうで楽しみです

アドカレ2025が開催中！

今年もアドカレ開催中です
最終日まであとちょっと...！！！

特設サイト ↓

ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！ ↓

参考