mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.
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.
구문
/* 키워드 값 */ 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; /* 전역 값 */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset;
값
<blend-mode>- 적용할 혼합 모드.
형식 구문
<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
예제
<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 예제
<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 예제
다음은 이전의 예제를 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 */
명세
| Specification | Status | Comment |
|---|---|---|
| Compositing and Blending Level 1 The definition of 'mix-blend-mode' in that specification. |
Candidate Recommendation | Initial definition |
브라우저 호환성
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