mix-blend-mode
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.
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: revert; mix-blend-mode: unset;
Values
<blend-mode> The blending mode that should be applied.
| Initial value | normal |
|---|
| Applies to | all elements |
|---|
| Inherited | no |
|---|
| Computed value | as specified |
|---|
| Animation type | discrete |
|---|
| Creates stacking context | yes |
|---|
<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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 class="item" 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 |
|---|
| Compositing and Blending Level 2 # mix-blend-mode |
See also
<blend-mode> background-blend-mode Last modified: Feb 3, 2022, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language
