# Mix Blend Mode

Set how an element's content should blend with the background of its parent.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 41 · Edge 79 · Firefox 32 · Safari 8

| Class | Properties | Value |
|-------|------------|-------|
| `mbm:n` | mix-blend-mode | `normal` |
| `mbm:m` | mix-blend-mode | `multiply` |
| `mbm:s` | mix-blend-mode | `screen` |
| `mbm:o` | mix-blend-mode | `overlay` |
| `mbm:d` | mix-blend-mode | `darken` |
| `mbm:l` | mix-blend-mode | `lighten` |
| `mbm:cd` | mix-blend-mode | `color-dodge` |
| `mbm:cb` | mix-blend-mode | `color-burn` |
| `mbm:hl` | mix-blend-mode | `hard-light` |
| `mbm:sl` | mix-blend-mode | `soft-light` |
| `mbm:df` | mix-blend-mode | `difference` |
| `mbm:e` | mix-blend-mode | `exclusion` |
| `mbm:h` | mix-blend-mode | `hue` |
| `mbm:st` | mix-blend-mode | `saturation` |
| `mbm:c` | mix-blend-mode | `color` |
| `mbm:lu` | mix-blend-mode | `luminosity` |
| `mbm:pd` | mix-blend-mode | `plus-darker` |
| `mbm:pl` | mix-blend-mode | `plus-lighter` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `mbm:n` | mix-blend-mode | `normal` |
| `mbm:m` | mix-blend-mode | `multiply` |
| `mbm:s` | mix-blend-mode | `screen` |
| `mbm:o` | mix-blend-mode | `overlay` |
| `mbm:d` | mix-blend-mode | `darken` |
| `mbm:l` | mix-blend-mode | `lighten` |
| `mbm:cd` | mix-blend-mode | `color-dodge` |
| `mbm:cb` | mix-blend-mode | `color-burn` |
| `mbm:hl` | mix-blend-mode | `hard-light` |
| `mbm:sl` | mix-blend-mode | `soft-light` |
| `mbm:df` | mix-blend-mode | `difference` |
| `mbm:e` | mix-blend-mode | `exclusion` |
| `mbm:h` | mix-blend-mode | `hue` |
| `mbm:st` | mix-blend-mode | `saturation` |
| `mbm:c` | mix-blend-mode | `color` |
| `mbm:lu` | mix-blend-mode | `luminosity` |
| `mbm:pd` | mix-blend-mode | `plus-darker` |
| `mbm:pl` | mix-blend-mode | `plus-lighter` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `mbm:n` | mix-blend-mode | `normal` |
| `mbm:m` | mix-blend-mode | `multiply` |
| `mbm:s` | mix-blend-mode | `screen` |
| `mbm:o` | mix-blend-mode | `overlay` |
| `mbm:d` | mix-blend-mode | `darken` |
| `mbm:l` | mix-blend-mode | `lighten` |
| `mbm:cd` | mix-blend-mode | `color-dodge` |
| `mbm:cb` | mix-blend-mode | `color-burn` |
| `mbm:hl` | mix-blend-mode | `hard-light` |
| `mbm:sl` | mix-blend-mode | `soft-light` |
| `mbm:df` | mix-blend-mode | `difference` |
| `mbm:e` | mix-blend-mode | `exclusion` |
| `mbm:h` | mix-blend-mode | `hue` |
| `mbm:st` | mix-blend-mode | `saturation` |
| `mbm:c` | mix-blend-mode | `color` |
| `mbm:lu` | mix-blend-mode | `luminosity` |
| `mbm:pd` | mix-blend-mode | `plus-darker` |
| `mbm:pl` | mix-blend-mode | `plus-lighter` |