mix-blend-modeで作る重なり表現デザイン集

mix-blend-modeで作る重なり表現デザイン集

画像やテキストを重ねたときに、ただ重なるだけでは物足りない…そんなときに活躍するのが mix-blend-mode です。
色の合成方法を変えることで、印象的でデザイン性の高い表現を実現できます。

この記事では、mix-blend-modeの基本から実践的なデザイン例までを、コピペOKのコード付きで紹介します。

mix-blend-modeとは？

mix-blend-modeは、要素と背景（または下の要素）との色の合成方法を指定するCSSプロパティです。

  • 色を重ねて表現できる
  • Photoshopの「描画モード」に近い
  • デザインの幅が大きく広がる

基本の使い方

HTML

HTML
<div class="wrap">
  <img src="image.jpg" alt="image">
  <h2 class="text">HELLO</h2>
</div>

CSS

CSS
.wrap {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 60px;
  color: #fff;
  mix-blend-mode: difference;
}

背景と文字が混ざり合い、印象的なビジュアルになります。

image

HELLO

よく使うブレンドモード

値特徴
multiply暗くなる（影表現）
screen明るくなる
overlayコントラスト強調
difference色が反転する
lighten明るい色を優先
darken暗い色を優先

実践① 画像 × テキストの合成

CSS
.text {
  color: #fff;
  mix-blend-mode: overlay;
}

ヒーローセクションでよく使われる演出です。

image

HELLO

実践② カラーフィルター風デザイン

HTML

HTML
<div class="filter">
  <figure><img src="image.jpg" alt="image"></figure>
</div>

CSS

CSS
.filter {
  background: #ff0000;
}

.filter img {
  width: 100%;
  mix-blend-mode: multiply;
}

写真に色味を乗せるような表現ができます。

image

実践③ ホバーで変化するエフェクト

HTML
<div class="card">
  <img src="image.jpg" alt="image">
  <div class="card-text">
    <h3>タイトル</h3>
    <p>説明テキストが入ります</p>
  </div>
</div>
CSS
.card {
  position: relative;
  width: 300px;
  overflow: hidden;
  border-radius: 12px;
}

.card img {
  width: 100%;
  display: block;
}

.card-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  color: #fff;
  z-index: 2;
}

/* ブレンドレイヤー */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #00f, #0ff);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .4s ease;
}

/* ホバー時 */
.card:hover::after {
  opacity: 1;
}

マウスオーバーで色の変化を演出できます。

image

タイトル

説明テキストが入ります

実践④ グラデーション × ブレンド

HTML
<section class="hero">
  <h1>Creative Design</h1>
  <p>mix-blend-modeで魅せる表現</p>
</section>
CSS
.hero {
  position: relative;
  height: 400px;
  background: url(image.jpg) center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* グラデーションレイヤー */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  mix-blend-mode: overlay;
  opacity: 0.8;
}

/* テキストを前面に */
.hero h1,
.hero p {
  position: relative;
  z-index: 2;
}

背景と組み合わせることで、アート系デザインに最適です。

Creative Design

mix-blend-modeで魅せる表現

注意点とコツ

  • 背景によって見え方が大きく変わる
  • 可読性が落ちやすい
  • テスト環境で必ず確認する

パフォーマンスと互換性

  • モダンブラウザはほぼ対応
  • 複雑な重なりは描画コストが上がる

アクセシビリティ配慮

CSS
@media (prefers-reduced-motion: reduce) {
  .card::after {
    transition: none;
  }
}

視覚効果が強い場合は、ユーザー設定に配慮しましょう。

まとめ

  • mix-blend-modeで重なり表現が可能
  • 画像・テキスト・UIすべてに応用できる
  • デザインの差別化に最適

少しの工夫で、サイトの印象を大きく変えることができます。

ワンポイント

Altie：「differenceはカッコいいけど読みづらくなりがち！大事な文字には使いすぎ注意だよ！」

関連記事

PAGE TOP