CSS Tips | 超実務コアCSSテクニック：カラー・背景 － mix-blend-mode

Web APP CSS
スポンサーリンク

mix-blend-mode は「下の色と“混ぜて描画する”」フォトショップ系テクニック

mix-blend-mode は、要素の色を
「そのまま上に乗せる」のではなく、
下にある背景や要素の色と“合成して描画する” プロパティです。

フォトショップの「乗算」「スクリーン」「オーバーレイ」などの
ブレンドモードとほぼ同じ感覚で使えます。

背景とテキスト、背景と図形、画像同士を
“普通じゃない混ざり方”で重ねたいときに使う、
少し上級者寄りだけど、ハマるとめちゃくちゃ表現力が上がるテクニックです。

mix-blend-mode の基本とよく使うモード

基本の書き方

.element {
  mix-blend-mode: multiply;
}
CSS

要素が「どういうルールで下の色と混ざるか」を指定します。

代表的なモードのざっくりイメージはこんな感じです。

multiply（乗算）
暗く重なる。色が掛け算されて、影っぽくなる。

screen（スクリーン）
明るく重なる。光が重なったような感じ。

overlay（オーバーレイ）
暗い部分は暗く、明るい部分は明るく。コントラストが強くなる。

difference（差の絶対値）
色の差分で描画。サイケ・グリッチ系の表現に向く。

lighten / darken
明るい方・暗い方を優先して描画。

Tailwind では mix-blend-multiply などのユーティリティが用意されています。

例1：テキストを背景と“乗算”させてポスター風にする

CSS 版

.hero {
  position: relative;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.hero-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 800;
  color: #f97316;
  mix-blend-mode: multiply;
}
CSS
<div class="hero">
  <img src="photo.jpg" alt="">
  <h1 class="hero-title">BLEND</h1>
</div>
HTML

Tailwind 版

<div class="relative overflow-hidden">
  <img src="photo.jpg" alt=""
       class="w-full h-80 object-cover">
  <h1 class="absolute inset-0 flex items-center justify-center
             text-[4rem] font-extrabold text-orange-400
             mix-blend-multiply">
    BLEND
  </h1>
</div>
HTML

ここでのポイントは、
テキストの色（オレンジ）と写真の色が「乗算」で混ざることで、
単なる“文字の上乗せ”ではなく、
ポスターっぽい一体感のある表現になることです。

例2：カラフルな円を背景とブレンドして“抽象アート風”にする

CSS 版

.bg {
  position: relative;
  min-height: 60vh;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  overflow: hidden;
}

.blob {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: #f97316;
  mix-blend-mode: screen;
  filter: blur(18px);
}
CSS
<div class="bg">
  <div class="blob" style="top: 10%; left: 10%;"></div>
  <div class="blob" style="bottom: 5%; right: 5%; background:#22c55e;"></div>
</div>
HTML

Tailwind 版

<section class="relative min-h-[60vh] overflow-hidden
                bg-[linear-gradient(135deg,#0f172a,#1d4ed8)]">
  <div class="absolute w-64 h-64 rounded-full bg-orange-400
              mix-blend-screen blur-2xl
              top-10 left-10"></div>
  <div class="absolute w-64 h-64 rounded-full bg-emerald-400
              mix-blend-screen blur-2xl
              bottom-5 right-5"></div>
</section>
HTML

screen は「光が重なる」ようなブレンドなので、
暗い背景の上で使うと、
ふわっと光る抽象的なアート背景が簡単に作れます。

例3：画像の上に重ねたグラデーションをブレンドして“色味を統一”する

CSS 版

.thumb-wrap {
  position: relative;
  overflow: hidden;
}

.thumb-wrap img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3b82f6, #ec4899);
  mix-blend-mode: overlay;
  opacity: 0.8;
}
CSS
<div class="thumb-wrap">
  <img src="photo.jpg" alt="">
  <div class="thumb-overlay"></div>
</div>
HTML

Tailwind 版

<div class="relative overflow-hidden rounded-xl">
  <img src="photo.jpg" alt=""
       class="w-full h-56 object-cover">
  <div class="absolute inset-0
              bg-[linear-gradient(135deg,#3b82f6,#ec4899)]
              mix-blend-overlay opacity-80"></div>
</div>
HTML

overlay は「暗い部分は暗く、明るい部分は明るく」強調するブレンドで、
写真にブランドカラーのグラデーションを重ねると、
サイト全体の色味を統一しやすくなります。

例4：テキストを背景画像とブレンドして“抜き文字”風にする

CSS 版

.hero2 {
  position: relative;
  min-height: 60vh;
  background: url('photo.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero2-title {
  font-size: 5rem;
  font-weight: 900;
  color: white;
  mix-blend-mode: difference;
}
CSS
<div class="hero2">
  <h1 class="hero2-title">DIFFERENCE</h1>
</div>
HTML

Tailwind 版

<section class="relative min-h-[60vh] flex items-center justify-center
                bg-[url('photo.jpg')] bg-cover bg-center">
  <h1 class="text-[5rem] font-black text-white mix-blend-difference">
    DIFFERENCE
  </h1>
</section>
HTML

difference は「背景との色の差」を強調するので、
背景が明るいところでは暗く、暗いところでは明るく見えます。
結果として、抜き文字のような不思議な存在感が出ます。

例5：ロゴを背景とブレンドして“馴染ませる”

CSS 版

.logo {
  width: 120px;
  mix-blend-mode: lighten;
  opacity: 0.9;
}
CSS
<div class="hero-bg">
  <img src="logo-white.png" class="logo" alt="Logo">
</div>
HTML

Tailwind 版

<div class="relative min-h-[40vh]
            bg-[radial-gradient(circle_at_top,#1d4ed8,#020617)] flex items-center justify-center">
  <img src="logo-white.png"
       class="w-28 mix-blend-lighten opacity-90"
       alt="Logo">
</div>
HTML

lighten は「明るい方を優先して描画」するので、
暗い背景の上で白ロゴを自然に馴染ませたいときに使えます。

mix-blend-mode を使うときの重要な考え方

1つの要素だけでなく「背景との関係」で考える

mix-blend-mode は、
その要素単体ではなく「下に何があるか」で見え方が変わります。
つまり、
背景の色・明るさ・コントラスト・写真の内容まで含めて設計する必要があります。

同じ mix-blend-multiply でも、
白背景の上ではほぼ変化がなく、
写真や濃い色の上では強く効きます。

不透明度（opacity）と組み合わせて“強さ”を調整する

ブレンドモードは強く効きすぎることが多いので、
opacity: 0.6〜0.9 くらいで少し弱めると、
UI としてちょうど良いバランスになりやすいです。

Tailwind なら opacity-70 や opacity-80 を組み合わせます。

テキストに使うときは「可読性」を必ずチェックする

テキストに mix-blend-mode をかけると、
背景によっては読みにくくなります。

見出しや装飾的なテキストには向きますが、
本文テキストにはあまり使わない方が安全です。

Tailwind で使える主な mix-blend-* クラス

mix-blend-normal
mix-blend-multiply
mix-blend-screen
mix-blend-overlay
mix-blend-darken
mix-blend-lighten
mix-blend-color-dodge
mix-blend-color-burn
mix-blend-hard-light
mix-blend-soft-light
mix-blend-difference
mix-blend-exclusion
mix-blend-hue
mix-blend-saturation
mix-blend-color
mix-blend-luminosity

まずは multiply / screen / overlay / difference あたりから触ってみると、
感覚が掴みやすいです。

そのまま使える「ブレンド背景ヒーロー」テンプレート（Tailwind）

<section class="relative min-h-screen overflow-hidden
                bg-slate-950 text-white flex items-center justify-center px-6">
  <img src="photo.jpg"
       class="absolute inset-0 w-full h-full object-cover opacity-70"
       alt="">
  <div class="absolute inset-0
              bg-[radial-gradient(circle_at_20%_20%,#3b82f6,transparent_60%),radial-gradient(circle_at_80%_80%,#ec4899,transparent_60%)]
              mix-blend-screen opacity-80"></div>

  <div class="relative max-w-xl text-center">
    <h1 class="text-4xl md:text-5xl font-bold mb-4">
      mix-blend-mode Playground
    </h1>
    <p class="text-slate-100/80 mb-6">
      背景と要素の色を“混ぜて描画”することで、普通のレイヤー重ねでは出せない表現ができます。
    </p>
    <button class="px-6 py-3 rounded-full bg-white/90 text-slate-900 text-sm font-semibold">
      はじめてみる
    </button>
  </div>
</section>
HTML

背景写真 × カラフルな radial-gradient × mix-blend-screen で、
一気に「アート寄りのヒーローセクション」になります。

まとめ

mix-blend-mode は、
「要素の色を、下のレイヤーとどう混ぜるか」 をコントロールするプロパティです。

普通の background や opacity では出せない、
ポスター・アート・ブランド性の強いビジュアルを作るときに真価を発揮します。

まずは

背景画像の上の大きな見出しに mix-blend-multiply
カラフルな円に mix-blend-screen
写真の上のグラデーションに mix-blend-overlay

あたりから試してみると、
「お、こういうことか」が体感で分かってきます。

スポンサーリンク
タイトルとURLをコピーしました