# CSS: “mix-blend-mode”: X is not a “mix-blend-mode” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-mix-blend-mode-x-is-not-a-mix-blend-mode-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `mix-blend-mode` property accepts a fixed set of blend mode keywords, and the validator reports anything outside that set, including typos and the newer `plus-lighter` keyword.

The keywords the validator accepts are `normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `color-dodge`, `color-burn`, `hard-light`, `soft-light`, `difference`, `exclusion`, `hue`, `saturation`, `color` and `luminosity`. Browsers drop a declaration they don't understand, so a misspelled value such as `multipley` leaves the element at the default `normal` and the blend effect never shows up.

`plus-lighter` is a different case. The Compositing and Blending Level 2 draft adds it to `mix-blend-mode`, and Chrome, Firefox and Safari support it. The validator only knows the Level 1 keywords, so it flags `plus-lighter` even inside an `@supports` block. `plus-darker` gets the same error, but it is not part of the `mix-blend-mode` grammar in the spec and only Safari supports it, so replace it.

If you need `plus-lighter`, for example to cross-fade two stacked images without a dip in brightness, keep it and mute this message for that value. Otherwise use `screen`, which also brightens the result but uses a softer formula, so compare the two visually before you switch.

## Invalid example

```css
.overlay {
  mix-blend-mode: multipley;
}

.crossfade img {
  mix-blend-mode: plus-lighter;
}
```

## Valid example

```css
.overlay {
  mix-blend-mode: multiply;
}

.crossfade img {
  mix-blend-mode: screen;
}
```