mix-blend-mode

Jump to:
  1. Syntax
  2. Examples
  3. Specifications
  4. Browser compatibility
  5. See also

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.

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>
The blending mode that should be applied.

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

HTML example

<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</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.

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

Specifications

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
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 41Edge No support NoFirefox Full support 32IE No support NoOpera Full support YesSafari Full support 8WebView Android Full support 41Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 32Opera Android ? Safari iOS Full support 8Samsung Internet Android ?
On SVG elementsChrome Full support 41Edge No support NoFirefox Full support 32IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile Full support YesFirefox Android Full support 32Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Tags: 
Contributors to this page: chrisdavidmills, mfluehr, wbamberg, Mohamed3on, fscholz, Jeremie, pborenstein, Wliu, Charlottha, sarahgp, zakdances, mrstork, Sebastianz, jordanmoore, teoli, APerson241, jpmedley, ishita, kyleolsondesign, FredB
Last updated by: chrisdavidmills,