The mix-blend-mode
CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 definition
Initial value | normal
|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Creates stacking context | yes |
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
Effect of different mix-blend-mode values
<div class="grid">
<div class="col">
<div class="note">Blending in isolation (no blending with the background)</div>
<div class="row isolate">
<div class="cell"> normal
<div class="container normal">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<defs>
<linearGradient id="red">
<stop offset="0" stop-color="hsl(0,100%,50%)" />
<stop offset="100%" stop-color="hsl(0,0%,100%)" />
</linearGradient>
<linearGradient id="green">
<stop offset="0" stop-color="hsl(120,100%,50%)" />
<stop offset="100%" stop-color="hsl(120,0%,100%)" />
</linearGradient>
<linearGradient id="blue">
<stop offset="0" stop-color="hsl(240,100%,50%)" />
<stop offset="100%" stop-color="hsl(240,0%,100%)" />
</linearGradient>
</defs>
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> multiply
<div class="container multiply">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> darken
<div class="container darken">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> screen
<div class="container screen">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> lighten
<div class="container lighten">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> overlay
<div class="container overlay">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color-dodge
<div class="container color-dodge">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color-burn
<div class="container color-burn">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> hard-light
<div class="container hard-light">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> soft-light
<div class="container soft-light">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> difference
<div class="container difference">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> exclusion
<div class="container exclusion">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> hue
<div class="container hue">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> saturation
<div class="container saturation">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color
<div class="container color">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> luminosity
<div class="container luminosity">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>
<div class="note">Blending globally (blend with the background)</div>
<div class="row">
<div class="cell"> normal
<div class="container normal">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> multiply
<div class="container multiply">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> darken
<div class="container darken">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> screen
<div class="container screen">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> lighten
<div class="container lighten">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> overlay
<div class="container overlay">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color-dodge
<div class="container color-dodge">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color-burn
<div class="container color-burn">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> hard-light
<div class="container hard-light">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> soft-light
<div class="container soft-light">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> difference
<div class="container difference">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> exclusion
<div class="container exclusion">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> hue
<div class="container hue">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> saturation
<div class="container saturation">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> color
<div class="container color">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
<div class="cell"> luminosity
<div class="container luminosity">
<div class="group">
<div class="item firefox"></div>
<svg viewBox="0 0 150 150">
<ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
<ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
html,body {
height: 100%;
box-sizing: border-box;
background: #EEE;
}
.grid {
width: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
height: auto;
}
.col {
display: flex;
flex: 1 auto;
flex-direction: column;
height: auto;
}
.cell {
margin: .5em;
padding: .5em;
background-color: #FFF;
overflow: hidden;
text-align: center;
}
.note {
background: #fff3d4;
padding: 1em;
margin: .5em .5em 0;
font: .8em sans-serif;
text-align: left;
white-space: nowrap;
}
.note + .row .cell {
margin-top: 0;
}
.container {
position: relative;
background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
width: 150px;
height: 150px;
margin: 0 auto;
}
.R {
transform-origin: center;
transform: rotate(-30deg);
fill: url(#red);
}
.G {
transform-origin: center;
transform: rotate(90deg);
fill: url(#green);
}
.B {
transform-origin: center;
transform: rotate(210deg);
fill: url(#blue);
}
.isolate .group { isolation: isolate; }
.normal .item { mix-blend-mode: normal; }
.multiply .item { mix-blend-mode: multiply; }
.screen .item { mix-blend-mode: screen; }
.overlay .item { mix-blend-mode: overlay; }
.darken .item { mix-blend-mode: darken; }
.lighten .item { mix-blend-mode: lighten; }
.color-dodge .item { mix-blend-mode: color-dodge; }
.color-burn .item { mix-blend-mode: color-burn; }
.hard-light .item { mix-blend-mode: hard-light; }
.soft-light .item { mix-blend-mode: soft-light; }
.difference .item { mix-blend-mode: difference; }
.exclusion .item { mix-blend-mode: exclusion; }
.hue .item { mix-blend-mode: hue; }
.saturation .item { mix-blend-mode: saturation; }
.color .item { mix-blend-mode: color; }
.luminosity .item { mix-blend-mode: luminosity; }
Using mix-blend-mode with HTML
HTML
<div class="isolate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
CSS
.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;
}
Result
Using mix-blend-mode with SVG
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>
CSS
circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
Result
Specifications
Specification | Status | Comment |
---|---|---|
Compositing and Blending Level 1The definition of 'mix-blend-mode' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mix-blend-mode
|
Chrome
Full support 41 |
Edge
Full support 79 |
Firefox
Full support 32 |
IE
No support No |
Opera
Full support 28 |
Safari
Full support 8 |
WebView Android
Full support 41 |
Chrome Android
Full support 41 |
Firefox Android
Full support 32 |
Opera Android
Full support 28 |
Safari iOS
Full support 8 |
Samsung Internet Android
Full support 4.0 |
On SVG elements | Chrome
Full support 41 |
Edge
Full support 79 |
Firefox
Full support 32 |
IE
No support No |
Opera
Full support 28 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
Full support 32 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
See also
mix-blend-mode by Mozilla Contributors is licensed under CC-BY-SA 2.5.