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.
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 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
<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; }
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 value | normal |
|---|---|
| Applies to | all 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 |
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.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 41 | No | 32 | No | Yes | 8 |
| On SVG elements | 41 | No | 32 | No | No | No |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 41 | ? | Yes | 32 | ? | 8 | ? |
| On SVG elements | No | ? | Yes | 32 | No | No | ? |
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,