カテゴリー
お問い合わせ

文字の切り抜きも画像合成もCSSだけで！mix-blend-mode の使い方と代表的なブレンドモード3選

HTML/CSS
目次

Webデザインのコーディングをしていて、「テキストと画像をオシャレに馴染ませたい」「写真に色を重ねてトーンを変えたい」と思ったことはありませんか？

従来はPhotoshopなどの画像編集ソフトで作った画像をそのまま書き出していましたが、CSSの mix-blend-mode プロパティを使えば、ブラウザ上で要素同士を合成（ブレンド）することができます！

今回は、特によく使う代表的なブレンドモード（乗算・スクリーン・オーバーレイ）の効果と、「テキスト＋画像」「画像＋色」「画像＋画像」の3つの実装パターンをデモ付きでご紹介します！

デモ動作

See the Pen CSS mix-blend-mode の使い方 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>mix-blend-mode 実装デモ</h2>
  
  <div class="p-blend-list">

    <!-- パターン1: テキスト + 画像 (スクリーン) -->
    <div class="p-card">
      <h3 class="p-card__title">1. テキスト ＋ 画像（Screen）</h3>
      <p class="p-card__desc">白い部分は透けず、黒い部分が透ける「スクリーン」の特性を利用し、文字の形に画像を切り抜きます。</p>
      
      <!-- 合成前の要素 -->
      <div class="p-before">
        <div class="p-before__item">
          <span class="p-before__label">下敷き</span>
          <img class="p-before__img" src="https://picsum.photos/id/10/600/400" alt="風景">
        </div>
        <div class="p-before__icon">＋</div>
        <div class="p-before__item">
          <span class="p-before__label">重ねる要素</span>
          <div class="p-before__layer p-before__layer--text">OCEAN</div>
        </div>
      </div>
      
      <div class="p-arrow">▼ 合成結果 ▼</div>

      <!-- 合成結果 -->
      <div class="p-demo-box">
        <img class="p-demo-box__bg" src="https://picsum.photos/id/10/600/400" alt="風景">
        <div class="p-demo-box__layer p-demo-box__layer--text">OCEAN</div>
      </div>
    </div>

    <!-- パターン2: 画像 + 色 (乗算) -->
    <div class="p-card">
      <h3 class="p-card__title">2. 画像 ＋ 単色（Multiply）</h3>
      <p class="p-card__desc">画像の上に単色を重ねて「乗算」。明るい部分に色が乗り、全体の色調を統一できます。</p>
      
      <!-- 合成前の要素 -->
      <div class="p-before">
        <div class="p-before__item">
          <span class="p-before__label">下敷き</span>
          <img class="p-before__img" src="https://picsum.photos/id/29/600/400" alt="山">
        </div>
        <div class="p-before__icon">＋</div>
        <div class="p-before__item">
          <span class="p-before__label">重ねる要素</span>
          <div class="p-before__layer p-before__layer--color"></div>
        </div>
      </div>
      
      <div class="p-arrow">▼ 合成結果 ▼</div>

      <!-- 合成結果 -->
      <div class="p-demo-box">
        <img class="p-demo-box__bg" src="https://picsum.photos/id/29/600/400" alt="山">
        <div class="p-demo-box__layer p-demo-box__layer--color"></div>
      </div>
    </div>

    <!-- パターン3: 画像 + 画像 (オーバーレイ) -->
    <div class="p-card">
      <h3 class="p-card__title">3. 画像 ＋ 画像（Overlay）</h3>
      <p class="p-card__desc">2つの異なる画像を「オーバーレイ」で合成。下の画像と上の画像のテクスチャが混ざり合います。</p>
      
      <!-- 合成前の要素 -->
      <div class="p-before">
        <div class="p-before__item">
          <span class="p-before__label">下敷き</span>
          <img class="p-before__img" src="https://picsum.photos/id/17/600/400" alt="道">
        </div>
        <div class="p-before__icon">＋</div>
        <div class="p-before__item">
          <span class="p-before__label">重ねる要素</span>
          <img class="p-before__img" src="https://picsum.photos/id/87/600/400" alt="木の葉">
        </div>
      </div>
      
      <div class="p-arrow">▼ 合成結果 ▼</div>

      <!-- 合成結果 -->
      <div class="p-demo-box">
        <img class="p-demo-box__bg" src="https://picsum.photos/id/17/600/400" alt="道">
        <img class="p-demo-box__layer p-demo-box__layer--image" src="https://picsum.photos/id/87/600/400" alt="木の葉">
      </div>
    </div>

  </div>
</div>

【CSS】

.l-wrap {
  max-width: 900px;
  margin: 0 auto;
  color: #3e3e3e;
  padding: 40px 20px;
}
h2 {
  font-size: 16px; 
  text-align: center; 
  color: #1bb4d4; 
  margin-bottom: 32px; 
}

/* レイアウト・カード装飾 */
.p-blend-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.p-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.p-card__title { 
  font-size: 20px; 
  margin-top: 0; 
  color: #1bb4d4; 
  border-bottom: 2px solid #eee; 
  padding-bottom: 8px; 
}
.p-card__desc { 
  font-size: 16px; 
  color: #666; 
  padding-top: 8px; 
  margin-bottom: 24px; 
  font-weight: bold; 
}

/* =========================================
   合成前の要素（before）の装飾
========================================= */
.p-before {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.p-before__item {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-before__label {
  font-size: 13px;
  font-weight: bold;
  background: #eee;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
  color: #555;
}
.p-before__icon {
  font-weight: bold;
  font-size: 24px;
  color: #999;
}
/* 合成前の画像とレイヤーの共通スタイル */
.p-before__img,
.p-before__layer {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
}
/* 合成前のテキストレイヤー */
.p-before__layer--text {
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 0.1em;
  border: 1px solid #ddd;
}
/* 合成前のカラーレイヤー */
.p-before__layer--color {
  background-color: #1bb4d4;
}

/* 矢印 */
.p-arrow {
  text-align: center;
  font-weight: bold;
  color: #1bb4d4;
  margin-bottom: 24px;
}

/* =========================================
   合成結果の装飾
========================================= */
.p-demo-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.p-demo-box__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-demo-box__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 1: テキスト (screen) */
.p-demo-box__layer--text {
  background-color: #fff; 
  color: #000;            
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 0.1em;
  mix-blend-mode: screen;
}

/* 2: 単色 (multiply) */
.p-demo-box__layer--color {
  background-color: #1bb4d4; 
  mix-blend-mode: multiply;
}

/* 3: 画像同士 (overlay) */
.p-demo-box__layer--image {
  object-fit: cover;
  mix-blend-mode: overlay;
}

/* スマホ用の文字サイズ調整 */
@media (width <= 600px) {
  .p-demo-box__layer--text { font-size: 48px; }
  .p-before__layer--text { font-size: 22px; }
}

コードの解説・代表的なブレンドモード

multiply（乗算）

重ねた要素の色を掛け合わせるモードです。全体的に色が暗くなり、重厚感が出ます。
白い部分は透明になり、黒い部分はより黒くなります。デモの2つ目のように「画像にカラーを被せてトーンを統一する」際によく使われます。

screen（スクリーン）

乗算の逆で、全体的に色が明るくなるモードです。 黒い部分が透明になり、白い部分が残ります。デモの1つ目のように「白背景に黒文字」の要素を screen で重ねると、文字の形に沿って下の画像が透けて見える、オシャレなマスク表現がCSSだけで実現できます！

overlay（オーバーレイ）

乗算とスクリーンを組み合わせたようなモードです。
下の層が暗い部分はより暗く（乗算）、明るい部分はより明るく（スクリーン）なります。コントラストが強くなり、デモの3つ目のようにテクスチャや画像を重ねて表現をするのに向いています。

補足：公式ドキュメントリンク

より詳しい仕様については、以下の公式ドキュメント等をご参照ください。

・MDN: mix-blend-mode

まとめ

今回は、CSSだけでPhotoshopのような画像合成ができる mix-blend-mode について解説しました。

画像編集ソフトであらかじめ合成した画像を書き出すよりも、CSSでブレンドした方が、あとから文字を変更したり、ホバー時にブレンドモードを解除したりと、柔軟なWebデザインが可能になります。

これからもCSSの表現力を最大限に活かして、よりリッチで保守性の高いコーディングを心掛けていきたいと思います！

Prev
Next

関連記事