HTML Guides for blend mode

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

.overlay {

mix-blend-mode: multipley;

}

.crossfade img {

mix-blend-mode: plus-lighter;

}

Valid example

.overlay {

mix-blend-mode: multiply;

}

.crossfade img {

mix-blend-mode: screen;

}