정의 및 사용 방법

mix-blend-mode 속성은
요소와 뒷배경(backdrop)이 겹칠 때 겹치는 부분의 색상이 혼합(mix)되는 블렌드 모드(Blend Mode)를 설정합니다.

다음은 '블렌드 모드(Blend Mode)' 용어에 대한 간단한 부연설명입니다.
블렌드 모드(Blend Mode)
두 개 이상의 레이어가 겹쳐질 때, 위쪽 레이어와 아래쪽 레이어가 어떤 방식으로 섞일지(혼합될지) 결정하는 합성 방식입니다.

블렌드 모드를 사용하면, 요소와 겹치는 뒷배경 간의 다양한 색상의 혼합 효과를 더할 수 있습니다.

기본 예제

HTML 
<div class="bg-layer"> <!-- 뒷배경 레이어 -->
    <div class="example">Example</div> <!-- mix-blend-mode를 적용할 요소 -->
</div>
CSS 
.bg-layer {
    background-image: url("bg.jpg");
}
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: /* value */
}
CSS 라이브 데모: mix-blend-mode 데모 버튼을 클릭해 보세요!

참고하세요!
mix-blend-mode가 요소와 뒷배경 색상을 혼합하는 효과이라면,
backdrop-filter는 요소의 배경 뒤로 비춰지는 레이어 필터 효과를 주고,
filter는 요소 자체에 필터 효과를 적용합니다.

형식 구문

CSS 
selector {
    mix-blend-mode: <mix-blend-mode>
}

구문

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

형식 정의

mix-blend-mode 속성의 형식 정의
초깃값 normal
적용 요소 모든 요소. SVG에서는 컨테이너 요소, 그래픽 요소 및 그래픽 참조 요소에 적용됩니다.
상속 아니오
애니메이션 아니오

값

mix-blend-mode 속성의 값
<mix-blend-mode> 적용할 블렌드 모드입니다.
(아래의 <mix-blend-mode> 목록을 참조하세요)

참고하세요!
mix-blend-mode 속성의 값이 normal이 아닐 경우, 해당 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 이로 인해 z-index를 사용한 요소의 겹침 순서 또는 주변 요소와의 겹침 순서가 달라지거나, 자식이나 자손 요소의 Containing Block이 재정의될 수 있습니다.

<mix-blend-mode>

mix-blend-mode 속성에 적용할 블렌드 모드는 다음과 같습니다.

normal

초깃값.
블렌드 모드를 적용하지 않고 단순히 겹칩니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: normal;
}
실제 적용된 모습
multiply

위 요소 색상이 뒷배경 위에 겹치는 부위에서는 색상이 곱해져 더 어둡게 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: multiply;
}
실제 적용된 모습
screen

위 요소 색상이 아래 뒷배경 위에 겹치는 부위에서는 색상이 반전·곱셈·반전 과정을 거쳐, 마치 스크린에 겹쳐 비치는 것처럼 밝게 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: screen;
}
실제 적용된 모습
overlay

위 요소가 아래 뒷배경 위에 덮어쓰듯 작동하며, 아래 뒷배경 색상에 따라 다르게 나타납니다. 아래 뒷배경이 어두우면 더 어둡게, 밝으면 더 밝게 보입니다.

CSS 
.example {
    mix-blend-mode: overlay;
}
실제 적용된 모습
darken

위 요소와 아래 뒷배경이 겹치는 부위에서는 각 픽셀의 빨강(R), 초록(G), 파랑(B) 채널 값을 개별적으로 비교해서 두 색상 중 더 어두운 색이 최종 색상으로 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: darken;
}
실제 적용된 모습
lighten

위 요소와 아래 뒷배경이 겹치는 부위에서는 각 픽셀의 빨강(R), 초록(G), 파랑(B) 채널 값을 개별적으로 비교해서 두 색상 중 더 밝은 색이 최종 색상으로 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: lighten;
}
실제 적용된 모습
color-dodge

위 요소와 아래 뒷 배경이 겹치는 부위에서, 아래 레이어 색상을 “피하면서”(Dodge: 회피하거나 밝게 만드는 사진 기술 용어) 위 요소 색상으로 밝기를 강조합니다. 그 결과 겹친 부분이 더 밝아지고, 하이라이트가 강하게 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: color-dodge;
}
실제 적용된 모습
color-burn

위 요소와 아래 뒷배경이 겹치는 부위에서, 아래 뒷배경 색상을 “태우듯(Burn: 불로 그을리듯 어둡게 만드는 사진 기술 용어)” 위 요소 색상으로 적용합니다. 그 결과 겹친 부분이 더 어둡게 나타나고, 그림자나 깊이가 강조됩니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: color-burn;
}
실제 적용된 모습
hard-light

위 요소가 아래 뒷배경 위에 덮어쓰듯 작동하며, 아래 뒷배경 색상에 따라 다르게 나타납니다. 아래 뒷배경이 어두우면 더 어둡게, 밝으면 더 밝게 보이며, 밝기 정보를 사용해 강한 빛을 비추는 듯한 효과를 만듭니다. 보통 밝기이면 아래 뒷배경에 별 영향을 주지 않습니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: hard-light;
}
실제 적용된 모습
soft-light

위 요소와 아래 뒷배경이 겹치는 부위에서, 위 요소 색상에 따라 아래 뒷배경 색상을 부드럽게 밝게 하거나 어둡게 합니다. 밝은 부분은 살짝 더 밝게, 어두운 부분은 살짝 더 어둡게 나타나면서 자연스러운 조명 효과를 줍니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: soft-light;
}
실제 적용된 모습
difference

위 요소와 아래 뒷배경이 겹치는 부위에서, 두 색상의 차이를 계산해 최종 색상을 만듭니다. 색상이 비슷하면 어둡게, 색상이 다르면 강한 대비가 나타납니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: difference;
}
실제 적용된 모습
exclusion

위 요소와 아래 뒷배경이 겹치는 부위에서, 두 색상의 차이를 계산하되, 차이가 극적으로 강조되지 않고 일부만 반영됩니다. 즉, 색상 차이를 “부분적으로 배제”하여 부드럽게 나타나면서 특유의 시각적 효과를 줍니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: exclusion;
}
실제 적용된 모습
hue

위 요소와 아래 뒷배경이 겹치는 부위에서, 아래 뒷배경의 밝기와 채도(Saturation)는 그대로 유지한 채, 위 요소의 색조(Hue)만 적용합니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: hue;
}
실제 적용된 모습
saturation

위 요소와 아래 뒷배경이 겹치는 부위에서, 아래 뒷배경의 색조(Hue)와 밝기는 유지한 채, 위 요소의 채도(Saturation)만 적용합니다. 결과적으로 아래 뒷배경의 원래 색상과 밝기 톤은 그대로 유지되며, 위 요소의 채도 수준에 따라 이미지가 더 선명해지거나(채도 증가), 또는 더 밋밋하게 보이게 됩니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: saturation;
}
실제 적용된 모습
color

위 요소와 아래 뒷배경이 겹치는 부위에서, 아래 뒷배경의 밝기는 유지한 채, 위 요소의 색조(Hue)와 채도(Saturation)만 적용합니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: color;
}
실제 적용된 모습
luminosity

위 요소의 밝기(Luminosity) 정보만 가져오고, 아래 뒷배경의 색조(Hue)와 채도(Saturation)는 그대로 유지합니다.

CSS 
.example {
    color: white; background-color: blue; border: 6px solid red;
    mix-blend-mode: luminosity;
}
실제 적용된 모습

브라우저 호환성

mix-blend-mode 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
mix-blend-mode 41 79 32 8

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

mix-blend-mode 속성의 명세서 사양
명세서 사양
mix-blend-mode Compositing and Blending Module Level 2
#mix-blend-mode

참고문헌

같이 보기