---
title: <blend-mode>
slug: Web/CSS/blend-mode
tags:
  - Blend modes
  - CSS
  - CSS Compositing
  - CSS Data Type
  - CSS データ型
  - CSS 合成
  - Compositing
  - Reference
  - ブレンドモード
  - 合成
translation_of: Web/CSS/blend-mode
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;blend-mode&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。</p>

<p>ブレンドモードは、適用されるレイヤーの各ピクセルについて前景と背景の色を取り、それらを計算し、新しい色の値を返します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<p><code>&lt;blend-mode&gt;</code> データ型は、以下に挙げたキーワードのうちの一つで定義します。</p>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code id="normal">normal</code></dt>
 <dd>
 <p>下の色が何であるかに関わらず、上の色が最終的な色になります。<br>
  この効果は2枚の不透明の紙が重なっているようなものです。</p>

 <div id="normal_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: normal;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
 </dd>
 <dt><code id="multiply">multiply</code></dt>
 <dd>
 <p>上の色と下の色を掛け合わせた結果が最終的な色になります。<br>
  黒いレイヤーは最終的に黒いレイヤーに近づけ、白いレイヤーは変化をもたらしません。<br>
  この効果は2枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。</p>

 <div id="multiply_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: multiply;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
 </dd>
 <dt><code id="screen">screen</code></dt>
 <dd>
 <p>色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。<br>
  黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。<br>
  この効果は2枚の画像がスクリーンに投影された状況に似ています。</p>

 <div id="screen_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: screen;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
 </dd>
 <dt><code id="overlay">overlay</code></dt>
 <dd>下の色が暗ければ <code>multiply</code>、下の色が明るければ <code>screen</code> の結果が最終的な色になります。。<br>
 このブレンドモードは <code>hard-light</code> と同等ですが、レイヤーは逆です。
 <div id="overlay_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: overlay;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
 </dd>
 <dt><code id="darken">darken</code></dt>
 <dd>
 <p>色成分ごとに最も暗い値が最終的な値になります。</p>

 <div id="darken_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: darken;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
 </dd>
 <dt><code id="lighten">lighten</code></dt>
 <dd>
 <p>色成分ごとに最も明るい値が最終的な値になります。</p>

 <div id="lighten_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: lighten;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
 </dd>
 <dt><code id="color-dodge">color-dodge</code></dt>
 <dd>
 <p>下の色を、反転した上の色で除算した結果が、最終的な色になります。<br>
  黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。<br>
  このブレンドモードは <code>screen</code> に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。</p>

 <div id="color-dodge_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color-dodge;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
 </dd>
 <dt><code id="color-burn">color-burn</code></dt>
 <dd>
 <p>反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。<br>
  白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。<br>
  このブレンドモードは <code>multiply</code> に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。</p>

 <div id="color-burn_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color-burn;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
 </dd>
 <dt>hard-light</dt>
 <dd>
 <p>上の色が暗い色であれば <code>multiply</code> 、明るい色であれば <code>screen</code> の結果が最終的な色になります。<br>
  このブレンドモードは <code>overlay</code> と同じですが、レイヤーが入れ替わっています。<br>
  この効果は、背景に<em>強烈な</em>スポットライトを当てた状況に似ています。</p>

 <div id="hard-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: hard-light;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
 </dd>
 <dt><code id="soft-light">soft-light</code></dt>
 <dd>
 <p>最終的な色は <code>hard-light</code> に似ていますが、よりソフトになります。<br>
  このブレンドモードは <code>hard-light</code> に似ています。<br>
  この効果は、背景に<em>拡散光の</em>スポットライトを当てた状況に似ています。</p>

 <div id="soft-light_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: soft-light;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
 </dd>
 <dt><code id="difference">difference</code></dt>
 <dd>
 <p>2つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。<br>
  黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>

 <div id="difference_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: difference;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
 </dd>
 <dt><code id="exclusion">exclusion</code></dt>
 <dd>
 <p>最終的な色は <code>difference</code> に似ていますが、コントラストが低くなります。<br>
  <code>difference</code> と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>

 <div id="exclusion_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: exclusion;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
 </dd>
 <dt><code id="hue">hue</code></dt>
 <dd>
 <p>最終的な色は上の色の<em>色調</em>を持ちますが、<em>彩度</em>および<em>明度</em>は下の色の値を使用します。</p>

 <div id="hue_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: hue;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
 </dd>
 <dt><code id="saturation">saturation</code></dt>
 <dd>
 <p>最終的な色は上の色の<em>彩度</em>を持ちますが、<em>色調</em>および<em>明度</em>は下の色の値を使用します。<br>
  彩度を持たない純粋なグレーの背景は、効果がありません。</p>

 <div id="saturation_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: saturation;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
 </dd>
 <dt><code id="color">color</code></dt>
 <dd>
 <p>最終的な色は上の色の<em>色調</em>および<em>彩度</em>を持ちますが、<em>明度</em>は下の色の値を使用します。<br>
  この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。</p>

 <div id="color_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: color;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
 </dd>
 <dt><code id="luminosity">luminosity</code></dt>
 <dd>
 <p>最終的な色は上の色の<em>明度</em>を持ちますが、<em>色調</em>および <em>彩度</em>は下の色の値を使用します。<br>
  このブレンドモードは <code>color</code> と同じですが、レイヤーが入れ替わっています。</p>

 <div id="luminosity_example">
 <div class="hidden">
 <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>

 <pre class="brush: css">#div {
  width: 300px;
  height: 300px;
  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
              url('https://mdn.mozillademos.org/files/8545/tr.png');
  background-blend-mode: luminosity;
}</pre>
 </div>
 </div>

 <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
 </dd>
</dl>

<h2 id="Interpolation_of_blend_modes" name="Interpolation_of_blend_modes">ブレンドモードの補間</h2>

<p>ブレンドモード間の遷移は補間されません。変更は直ちに行われます。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
   <td>{{ Spec2('Compositing') }}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.types.blend-mode")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
 <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
</ul>