1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Properties
  5. mix-blend-mode

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

mix-blend-mode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020년 1월⁩.

* Some parts of this feature may have varying levels of support.

mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.

시도해 보기

mix-blend-mode: normal; 
mix-blend-mode: multiply; 
mix-blend-mode: hard-light; 
mix-blend-mode: difference; 
<section class="default-example" id="default-example"> <div class="example-container"> <img id="example-element" src="/shared-assets/images/examples/firefox-logo.svg" width="200" /> </div> </section> 
.example-container { background-color: sandybrown; }

Syntax

css
/* 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: inherit; mix-blend-mode: initial; mix-blend-mode: revert; mix-blend-mode: revert-layer; mix-blend-mode: unset;

Values

<blend-mode>

The blending mode that should be applied.

Formal definition

초기값normal
적용대상all elements
상속no
계산 값as specified
Animation typeNot animatable
Creates stacking contextyes

Formal syntax

mix-blend-mode = 
 <blend-mode> |
 plus-lighter 

<blend-mode> = 
 normal |
 darken |
 multiply |
 color-burn |
 lighten |
 screen |
 color-dodge |
 overlay |
 soft-light |
 hard-light |
 difference |
 exclusion |
 hue |
 saturation |
 color |
 luminosity
이 구문은 CSS Specification에 따른 최신 표준을 반영합니다. 모든 브라우저가 모든 부분을 구현한 것은 아닙니다. 지원 정보는 브라우저 호환성을 참조하세요.

Examples

Effect of different mix-blend-mode values

Using mix-blend-mode with HTML

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

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

html
<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

css
circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */

Result

Using mix-blend-mode with text

This example uses mix-blend-mode to blend text color with the background color of its parent element.

HTML

html
<div class="container"> <p>Mostly Harmless</p> <p class="multiply">Mostly Harmless</p> <p class="screen">Mostly Harmless</p> <p class="hard-light">Mostly Harmless</p> </div>

CSS

css
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap"); .container { background-color: blue; } p { font: 4rem "Rubik Moonrocks", cursive; font-weight: bold; color: orange; padding: 0.5rem; margin: 0; } .multiply { mix-blend-mode: multiply; } .screen { mix-blend-mode: screen; } .hard-light { mix-blend-mode: hard-light; }

Result

명세서

Specification
Compositing and Blending Level 2
# mix-blend-mode

브라우저 호환성

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content