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.


/* 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;


The blending mode that should be applied.

Formal syntax


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


HTML example

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;

.circle-1 {
  background: red;

.circle-2 {
  background: lightgreen;
  left: 40px;

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;

.isolate {
  isolation: isolate; /* Without isolation, the background color will be taken into account */
  position: relative;

SVG example

This example reproduces the previous example using 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"/>
circle { mix-blend-mode: screen; }  
.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */


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

Initial valuenormal
Applies toall elements
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support41 No32 No Yes8
On SVG elements41 No32 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support41 ? Yes32 ?8 ?
On SVG elements No ? Yes32 No No ?

See also

Document Tags and Contributors

Last updated by: chrisdavidmills,