CSSのmix-blend-modeとは？色を重ねたときの見え方を解説

TIPS

WEBサイトのバナーで、色の付いた図形を重ねた部分だけ違う色に見せたいときは、CSSのmix-blend-modeが使えます。単に図形を半透明にするのではなく、手前の要素とその背後の色を計算して合成する指定です。ただし、文字に適用すると背景次第で読みにくくなることもあります。仕組みと具体例を知り、使う場所を選びましょう。

mix-blend-modeとは？重ねる順序で見え方が変わる

CSS（WEBページの見た目を指定するルール）のmix-blend-modeは、要素の内容と、同じ重なりの範囲で背後に表示される内容をどう混ぜるか決めるプロパティです。図形・画像・文字などに使えます。何も指定しないとnormalとなり、通常は手前の不透明な色が背後の色を覆います。

主な値の違いは次のとおりです。

multiply（乗算）：重なった色を掛け合わせ、一般に暗い方向の合成になります。色付きの図形が交差する部分を濃く見せたいときに向きます。
screen（スクリーン）：重なりを一般に明るい方向へ合成します。濃い色同士でも明るく見えることがあります。
difference（差の絶対値）：手前と背後の各色成分の差から色を作ります。背景に応じて大きく色が変わるため、装飾では面白くても文字には慎重な確認が必要です。
normal：合成しない通常の表示です。効果を比べる際の基準になります。

同じ要素に指定した複数の背景画像や背景色を混ぜるbackground-blend-modeとは異なり、mix-blend-modeは要素とその背後の表示を対象にします。また、opacityが要素全体の不透明度を変えるのに対し、こちらは背後の色との混ぜ方を変える指定です。

講座案内バナーで2色の円を重ねるCSS例

オンラインのデザイン講座を案内するバナーで、左側に青#5AA0D0とコーラル#F2A570の円を置く例です。両方の円にmultiplyを設定すると、交差部分がそれぞれの元の色より暗い色調になり、重なりを視覚的に表現できます。円は装飾なので、文字とは別の領域にまとめます。

<div class="course-banner">
  <div class="course-art" aria-hidden="true">
    <span class="disc disc--blue"></span>
    <span class="disc disc--coral"></span>
  </div>
  <div class="course-copy">
    <strong>デザイン講座</strong>
    <a class="course-action" href="/courses/">講座の詳細</a>
  </div>
</div>

.course-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: rgb(255 255 255);
}
.course-art {
  position: relative;
  width: 230px;
  height: 150px;
  isolation: isolate;
}
.disc {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.disc--blue {
  left: 12px;
  top: 12px;
  background-color: rgb(90 160 208);
}
.disc--coral {
  left: 88px;
  top: 20px;
  background-color: rgb(242 165 112);
}
.course-copy { color: rgb(32 47 65); }
.course-action {
  display: inline-block;
  padding: 10px 16px;
  background-color: rgb(28 72 116);
  color: rgb(255 255 255);
  text-decoration: underline;
}

バナー背景は白#FFFFFF、文字は濃い青灰色#202F41です。案内リンクは紺色の背景#1C4874に白い文字#FFFFFFを合わせます。文字と背景のコントラスト比は約13.60:1、リンク文字と背景は約9.42:1で、いずれもWCAG 2.2が通常サイズの文字に求める4.5:1を上回ります。リンク先の/courses/は実際のページに合わせて変更してください。

混ざらないとき・読みにくいときの確認ポイント

まず、円が実際に重なっているか、どの要素が手前に表示されるかを確認します。重なり順や背後の色が違えば、同じmix-blend-modeでも結果は変わります。上の例のisolation: isolateは、円の混合を装飾用の領域内に限定するための指定です。周囲の別の背景や要素に混合が広がるのを防ぎたい場合に役立ちます。

効果を見比べるときは、一度normalに戻してからmultiplyやscreenを試します。文字やボタンの要素そのものに混合を掛けると、背景が変わるたびに文字色の見え方も変化します。装飾だけに使い、見出し・説明文・操作リンクは混合対象から外す方が、配色を管理しやすくなります。

画面幅が狭いと図形と文字の配置が変わるため、スマートフォンでも重なり位置を見直しましょう。混合後の色が重要な意味を持つ場合は、実際に表示した色と隣接色のコントラストを確認してください。HueRollで元の配色候補を検討することはできますが、重なった結果の色を自動で再現・判定する機能ではありません。色だけに重要な情報を任せず、文字や形でも伝えることが大切です。