mix-blend-mode

Summary

The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

Initial valuenormal
Applies toall HTML elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

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>

Examples

<svg>
  <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"/>
</svg>
circle { mix-blend-mode: screen; }

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support

41.0

32.0 (32.0) ? (Yes) 8.0
SVG Not supported 32.0 (32.0) ? Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

32.0 (32.0) ? ? 8.0
SVG Not supported 32.0 (32.0) ? Not supported Not supported

See also

Document Tags and Contributors

 Last updated by: mrstork,