Created:2026/03/04
Updated:2026/03/04
Author:
Takeshi Takatsudo

ブレンドモード

問題

AIエージェントは、デザインが明らかにブレンドモード（blend mode）を求めている場合でも、CSSブレンドモードに手を伸ばすことがほとんどありません。画像の上のテキストにはブレンドモードではなく不透明なオーバーレイ div を使い、画像の色調補正には background-blend-mode の方がシンプルなのに filter で行います。ブレンドモードを使う場合でも、isolation プロパティを忘れて、DOM上位の関係ない背景と意図せずブレンドしてしまうことがよくあります。

解決方法

CSSには2つのブレンドモードプロパティがあります。

mix-blend-mode — スタッキング順序において、要素の色がその直後のコンテンツとどのようにブレンドされるかを制御します
background-blend-mode — 要素自身の複数の背景レイヤー同士がどのようにブレンドされるかを制御します

両方とも同じブレンドモード値のセット（multiply、screen、overlay、darken、lighten、color-dodge、color-burn、difference、exclusion、soft-light など）を受け付けます。コンテナに isolation: isolate を設定すると、子要素のブレンドモードが親の背景に漏れ出すのを防げます。

コード例

画像を暗くするオーバーレイ

最も一般的なユースケース：写真の上に読みやすいテキストを表示する方法です。半透明の黒いオーバーレイの代わりに、multiply を使ってコントラストを保ちながら画像を暗くします。

.hero-overlay {
  position: relative;
  background: url("hero.jpg") center / cover;
}

.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(220deg 60% 20%);
  mix-blend-mode: multiply;
}

.hero-content {
  position: relative;
  z-index: 1;
  color: white;
}

<section class="hero-overlay">
  <div class="hero-content">
    <h1>Hero Title</h1>
    <p>Text is readable without a flat black overlay.</p>
  </div>
</section>

multiply は画像のコントラストと色のバリエーションを保ちながら明るい部分を暗くします。すべてを均一にフラットにしてしまう rgba(0,0,0,0.5) オーバーレイとは異なります。

background-blend-mode による画像のカラーティンティング

/* Duotone effect */
.duotone {
  background:
    url("photo.jpg") center / cover,
    linear-gradient(#1a1a2e, #3b82f6);
  background-blend-mode: luminosity;
}

/* Warm tint */
.warm-tint {
  background:
    url("photo.jpg") center / cover,
    hsl(30deg 80% 50%);
  background-blend-mode: overlay;
}

/* Cool monochrome */
.cool-mono {
  background:
    url("photo.jpg") center / cover,
    hsl(220deg 80% 30%);
  background-blend-mode: color;
}

背景に適応するテキスト

テキストに mix-blend-mode: difference を設定すると、背景に対してテキストの色が反転し、ライト・ダークどちらの領域でも読みやすくなります。

.adaptive-text {
  color: white;
  mix-blend-mode: difference;
  font-size: 3rem;
  font-weight: 700;
}

ノックアウトテキスト効果

screen を使って、テキストが背景を「切り抜いて」見せるエフェクトを作成します。

.knockout-container {
  background: url("texture.jpg") center / cover;
  isolation: isolate;
}

.knockout-text {
  background: black;
  color: white;
  mix-blend-mode: screen;
  font-size: 4rem;
  font-weight: 900;
  padding: 20px;
}

screen は黒い部分を透明に、白い部分を不透明にします。そのため白いテキストからテクスチャが透けて見え、黒い背景は消えます。

`isolation` プロパティ

isolation: isolate がないと、ブレンドモードはDOMを上に伝播し、関係のない背景を含む要素の背後にあるすべてのコンテンツとブレンドしてしまいます。コンテナに isolation: isolate を設定すると、新しいスタッキングコンテキストが作成され、ブレンドが子要素内に限定されます。

/* Without isolation — text blends with page background too */
.card-broken {
  background: white;
}

.card-broken .blend-text {
  mix-blend-mode: multiply;
  /* Multiplies with everything behind, including page background */
}

/* With isolation — blending stops at the card */
.card-fixed {
  background: white;
  isolation: isolate;
}

.card-fixed .blend-text {
  mix-blend-mode: multiply;
  /* Only multiplies with the card's white background */
}

ブレンドされた背景パターン

/* Plaid pattern using blended gradients */
.plaid {
  background:
    repeating-linear-gradient(
      0deg,
      hsl(220deg 80% 60% / 0.3) 0px,
      hsl(220deg 80% 60% / 0.3) 20px,
      transparent 20px,
      transparent 40px
    ),
    repeating-linear-gradient(
      90deg,
      hsl(350deg 80% 60% / 0.3) 0px,
      hsl(350deg 80% 60% / 0.3) 20px,
      transparent 20px,
      transparent 40px
    ),
    hsl(0deg 0% 95%);
  background-blend-mode: multiply;
}