# mix-blend-mode

> 要素の内容が背景とどのように混ざり合うかを指定するプロパティです。Photoshopのブレンドモードと同様の効果。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/mix-blend-mode/

## 構文

```css
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | ...
```

## Tailwindでは

- `mix-blend-multiply` → mix-blend-mode: multiply
- `mix-blend-screen` → mix-blend-mode: screen
- 一般形: `mix-blend-{mode}`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 41+ / Firefox 32+ / Safari 8+ / Edge 79+

## コード例

### 例1: 乗算合成（暗くなる）

```css
mix-blend-mode: multiply;
```

### 例2: スクリーン合成（明るくなる）

```css
mix-blend-mode: screen;
```

### 例3: 差の絶対値合成

```css
mix-blend-mode: difference;
```

## TIPS

テキストと画像を重ねて見やすくしたり、デザイン性の高いエフェクトを作成できる。multiply、screen、overlayがよく使われる。

## よくある間違い

親要素にisolation: isolate;がないと、予期しない要素ともブレンドされる。パフォーマンスに影響する場合がある。

## AIがよく間違えるポイント

「効かない」原因の多くは重なる相手が不透明な背景を持たないこと、または意図しない要素とまで混ざることです。混ざる範囲を区切るには親にisolation: isolateを指定します——このセット運用をAIは省略しがちです。白背景ではmultiply、黒背景ではscreenが基本、という選び方も添えると良いコードになります。

## AIへの依頼文例

- 写真の上のロゴを背景と自然に馴染ませたい。mix-blend-modeとisolationのセットで、混ざる範囲を制御して

## 関連プロパティ

- [background-blend-mode](https://www.css-dictionary.com/property/background-blend-mode.md)
- [isolation](https://www.css-dictionary.com/property/isolation.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)