mix-blend-mode

The mix-blend-mode property specifies how an element blends with its background.

Formal Syntax

mix-blend-mode = <blend-mode> | plus-lighter <blend-mode> = normal | darken | multiply | color-burn | lighten | screen | color-dodge | overlay | soft-light | hard-light | difference | exclusion | hue | saturation | color | luminosity

Initial value: normal
Applies to: All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]
Inherited: no
Percentages: N/A
Computed value: as specified
Animation type: discrete
Media: visual

See specification

JavaScript Access

// Access via element.style element.style.mixBlendMode = "normal";

Browser Support

standard | MDN · Spec

Feature	Chrome	Firefox	Safari	Edge
mix-blend-mode	41	32	8	79
color	41	32	10	79
color-burn	41	32	8	79
color-dodge	41	32	8	79
darken	41	32	8	79
difference	41	32	8	79
exclusion	41	32	8	79
hard-light	41	32	8	79
hue	41	32	10	79
lighten	41	32	8	79
luminosity	41	32	10	79
multiply	41	32	8	79
normal	41	32	8	79
overlay	41	32	8	79
plus-darker	—	—	9	—
plus-lighter	100	99	9.1	100
saturation	41	32	10	79
screen	41	32	8	79
soft-light	41	32	8	79
svg_elements	41	32	—	79

Related Properties