mix-blend-mode
mix-blend-mode は CSS のプロパティで、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 41 | 79 | 32 | 8 | 41 | 8 | |
plus-darker 実験的 | | | | 9 | | 9 |
plus-lighter | 100 | 100 | 99 | 9.1 | 100 | 9.3 |
svg elements SVG要素について | 41 | 79 | 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 と組み合わせて合成範囲を制限できる。
アクセシビリティ
- ブレンド効果によりテキストの可読性が低下しないよう、コントラスト比に注意する。