mix-blend-mode

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

Initial value	normal
Applies to	all HTML elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

Syntax

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Values

<blend-mode>

Is a <blend-mode> denoting the blending mode that should be applied. There can be several values, separated by commas.

Formal syntax

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

Examples

<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red"/>
    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
    <circle cx="60" cy="80" r="40" fill="blue"/>
  </g>
</svg>

circle { mix-blend-mode: screen; }  
.isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */

Live result

Specifications

Specification	Status	Comment
Compositing and Blending Level 1 The definition of 'mix-blend-mode' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

See also

• <blend-mode>
• background-blend-mode