Widely available 安心して使用可能。主要ブラウザで広くサポートされている。
エフェクト Widely available

mix-blend-mode

mix-blend-mode は要素の色と背後の色をどう合成するかを指定する。multiply・screen・overlay・darken・lighten など Photoshop でおなじみのブレンドモードが使える。テキストと背景画像の合成や、重なった要素間のクリエイティブな視覚効果に活用できる。

エフェクト合成

概要

mix-blend-mode は要素の色と背後の色をどう合成するかを指定する。multiply・screen・overlay・darken・lighten など Photoshop でおなじみのブレンドモードが使える。テキストと背景画像の合成や、重なった要素間のクリエイティブな視覚効果に活用できる。

対応ブラウザ

デスクトップ

Chrome 41+
Edge 79+
Safari 8+
Firefox 32+

モバイル

Chrome Android 41+
Safari iOS 8+
Firefox Android 32+

基本構文

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

.image-blend {
  mix-blend-mode: screen;
}

.duotone {
  position: relative;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #4f46e5;
  mix-blend-mode: color;
}

実務での使いどころ

  • デュオトーン効果

    画像に色を重ねて mix-blend-mode: color でデュオトーン風のビジュアルを作成。

  • テキスト合成

    テキストを背景画像とブレンドし、テクスチャ付きの文字表現を行う。

注意点

  • mix-blend-mode は新しいスタッキングコンテキストを生成しないが、isolation: isolate と組み合わせて合成範囲を制限できる。

アクセシビリティ

  • ブレンド効果によりテキストの可読性が低下しないよう、コントラスト比に注意する。

参考リンク