Mix-blend-mode プロパティ

最終更新：2026-09-13

mix-blend-mode Mix-blend-mode プロパティ

mix-blend-mode プロパティは、要素のコンテンツがその下にあるコンテンツ（背景や隣接する要素）と色をどう混ぜ合わせるかを制御します。Photoshop のレイヤーブレンドモードに似ています。テキストや画像が背景に対して豊かな色の合成を生み出せるようになり、ポスターやバナー、芸術的なページデザインでよく使われます。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

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

⚙️ 値

値	タイプ	説明
`normal \| multiply \| screen \| overlay \| darken \| lighten \| color-dodge \| color-burn \| hard-light \| soft-light \| difference \| exclusion \| hue \| saturation \| color \| luminosity`	キーワード	ブレンドモード

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
mix-blend-mode	✓ v30	✓ v12	✓ v30	✓ v9	✓ v16
すべての主要ブラウザーでサポート

ヒント： multiply は白色を透明にするため、白色のロゴがカラー背景に溶け込みます。screen はその逆で、黒色を透明にします。

重要： ブレンドは要素の下にあるコンテンツに依存します。要素が独自の層叠コンテキスト内にあり、その下に何もない場合、ブレンド効果は表示されません。

❓ よくある質問

Qmix-blend-mode と background-blend-mode の違いは何ですか？

Amix-blend-mode は要素のコンテンツ（背景を含む）をその下のすべてのものと混ぜ合わせます。これは要素をまたぐブレンドです。background-blend-mode は同じ要素内の複数の背景レイヤー同士だけをブレンドします。テキストを背景画像と融合させるには mix-blend-mode を、複数の背景画像同士を混ぜるには background-blend-mode を使ってください。

QCSS で mix-blend-mode を設定したのに視覚的な効果が出ないのはなぜですか？

Aよくある原因は次のとおりです。要素の下に混ぜ合わせ可能なコンテンツがない。要素自身または親が独自の層叠コンテキストを作成し、ブレンド範囲が制限されている。あるいは要素が完全に透明か、下のコンテンツに完全に覆われている。親に isolation: isolate を追加して分離範囲を明示的に定義し、本当に下に混ぜ合わせ可能なコンテンツがあるか確認してください。

QCSS で multiply と screen のブレンドモードはどのような場面で使うべきですか？

Amultiply は白色に優しく — 白色はブレンドしても変化しません — そのため白色のロゴをカラー背景に重ねて透かし効果を作るのに適しています。screen はその逆で、黒色には影響しません。したがって暗いコンテンツを明るい背景に重ねるのに適しています。その他によく使われるもの：overlay はテキストと画像の融合に向き、difference は芸術的な反転色効果を作れます。

Qmix-blend-mode のブラウザ対応状況はどうですか？特にモバイルでは？

Aモダンなデスクトップブラウザ（Chrome、Firefox、Safari、Edge）は 2015 年頃から完全対応していますが、古いバージョンや一部の WebView エンジンでは差があり、ブレンドが欠落したり不整合が生じたりすることがあります。モバイルでは iOS Safari と Android 版 Chrome の両方が対応しています。重要な視覚効果には、ブレンドに依存しない代替手段を提供することをお勧めします。