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.
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 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 |
Browser compatibility
BCD tables only load in the browser