정의 및 사용 방법

background-blend-mode 속성은
한 요소의 여러 배경 레이어가 겹칠 때, 레이어 간 투명도 또는 색상이 상호 작용하는 방식을 결정하는 블렌드 모드(Blend Mode)를 설정합니다.

블렌드 모드를 사용하면, 한 요소의 겹치는 배경 레이어에 다양한 색상과 효과를 줄 수 있습니다.

한 요소의 여러 배경 레이어

background-blend-mode 속성을 이해하려면 한 요소가 가질 수 있는 배경 레이어(Background Layers)가 무엇이며, 이들이 어떻게 겹쳐지는지 아는 것이 중요합니다.

CSS에서 요소의 배경은 다음 두 가지 종류의 배경 레이어를 통해 여러 배경 레이어로 구성될 수 있습니다.

  • 배경 색상(Background Color) 레이어
  • 배경 이미지(Background Images) 레이어
CSS 
.box {
    background-image: url('overlay.png'), /* 배경 이미지 레이어 */
                    linear-gradient(blue, red), /* 배경 이미지 레이어 */
                    url('base.jpg'); /* 배경 이미지 레이어 */
    background-color: blue; /* 배경 색상 레이어 */
}

배경 색상(Background Color) 레이어

배경 색상(Background Color) 레이어는 background-color 속성으로 설정된 요소의 배경 색상 레이어입니다.
요소에 배경 색상이 설정되면 하나의 배경 색상 레이어가 생성됩니다. 하나의 요소에는 단일한 배경 색상만을 설정할 수 있으며, 모든 배경 레이어의 가장 하단에 깔립니다.

CSS 
.box {
    background-color: blue; /* 배경 색상 레이어 */
}

배경 이미지(Background Images) 레이어

배경 이미지(Background Images) 레이어는 background-image 속성으로 설정된 요소의 배경 이미지 레이어입니다.
요소에 배경 이미지가 설정되면 하나의 배경 이미지 레이어가 생성됩니다. 하나의 요소에는 여러 배경 이미지를 설정할 수 있으며, 지정한 순서대로 위쪽부터 쌓입니다. 배경 이미지 레이어가 설정되면, 배경 색상 레이어는 항상 가장 밑바닥에 위치하며, 모든 배경 이미지 레이어 아래에 깔립니다.

배경 이미지에는 이미지 파일 또는 그라디언트가 사용됩니다.

CSS 
.box {
  background-image: url('overlay.png'),       /* 배경 이미지 레이어 1 */
                    linear-gradient(blue, red), /* 배경 이미지 레이어 2 */
                    url('base.jpg');          /* 배경 이미지 레이어 3 */
}

주의하세요!
background-blend-mode 속성은 한 요소의 내부에서만 작동합니다.
서로 다른 요소가 겹치더라도, 각 요소 내부의 블렌드 모드만 적용되며 요소 간에는 영향을 주지 않습니다.

기본 예제

HTML 
<div class="element"></div>
CSS 
element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-color: silver;
    background-blend-mode: /* value */
}
CSS 라이브 데모: background-blend-mode 데모 버튼을 클릭해 보세요!

형식 구문

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

구문

CSS 
/* <mix-blend-mode>: 단일 값 */
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

/* <mix-blend-mode>: 여러 개의 값 */
background-blend-mode: darken, luminosity;

/* 글로벌 값 */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

형식 정의

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

값

background-blend-mode 속성의 값
<mix-blend-mode> 적용할 블렌드 모드입니다.
쉼표로 구분된 여러 개의 값 목록을 지정할 수 있으며, 값의 수가 배경 레이어 수보다 적으면 충분한 값이 있을 때까지 목록 전체를 반복하여 나머지 레이어에도 적용합니다.
(아래의 <mix-blend-mode> 목록을 참조하세요)

<mix-blend-mode>

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

normal

초깃값.
브렌드 모드를 적용하지 않으며 배경 레이어가 상호 작용하지 않고 단순히 쌓입니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: normal;
}
실제 적용된 모습
multiply

위 레이어 색상이 아래 레이어 위에 겹치는 부위에서는 색상이 곱해져 더 어둡게 나타납니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: multiply;
}
실제 적용된 모습
screen

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: screen;
}
실제 적용된 모습
overlay

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: overlay;
}
실제 적용된 모습
darken

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: darken;
}
실제 적용된 모습
lighten

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: lighten;
}
실제 적용된 모습
color-dodge

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: color-dodge;
}
실제 적용된 모습
color-burn

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: color-burn;
}
실제 적용된 모습
hard-light

위 레이어가 아래 레이어 위에 덮어쓰듯 작동하며, 아래 레이어 색상에 따라 다르게 나타납니다. 아래 레이어가 어두우면 더 어둡게, 밝으면 더 밝게 보이며, 밝기 정보를 사용해 강한 빛을 비추는 듯한 효과를 만듭니다

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: hard-light;
}
실제 적용된 모습
soft-light

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: soft-light;
}
실제 적용된 모습
difference

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: difference;
}
실제 적용된 모습
exclusion

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: exclusion;
}
실제 적용된 모습
hue

위 레이어가 아래 레이어와 겹치는 부위에서, 아래 레이어의 밝기와 채도(Saturation)는 그대로 유지한 채, 위 레이어의 색조(Hue)만 적용합니다. 색조만 변경되므로 자연스러운 색상 변화를 만들 수 있습니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: hue;
}
실제 적용된 모습
saturation

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

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: saturation;
}
실제 적용된 모습
color

위 레이어가 아래 레이어와 겹치는 부위에서, 아래 레이어의 밝기는 유지한 채, 위 레이어의 색조(Hue)와 채도(Saturation)만 적용합니다. 결과적으로 아래 레이어의 밝기 톤은 그대로 유지되면서, 위 레이어의 색상으로 덧입혀지는 효과가 나타납니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: color;
}
실제 적용된 모습
luminosity

위 레이어의 밝기(Luminosity) 정보만 가져오고, 아래 레이어의 색조(Hue)와 채도(Saturation)는 그대로 유지하는 블렌드 모드입니다. 결과적으로 이미지의 색상은 변하지 않지만, 위 레이어의 밝기와 명암 대비에 따라 아래 레이어의 밝기 톤이 바뀝니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: luminosity;
}
실제 적용된 모습

여러 개의 값을 사용하는 방법

쉼표로 구분된 여러 개의 값 목록을 지정할 수 있으며, 값의 수가 배경 레이어 수보다 적으면 충분한 값이 있을 때까지 목록 전체를 반복하여 나머지 레이어에도 적용합니다.

CSS 
.element {
    background-image: url("yellow.png"), url("red.png"), url("blue.png");
    background-blend-mode: multiply, darken, hue;
}
실제 적용된 모습

브라우저 호환성

background-blend-mode 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-blend-mode 35 79 30 8

명세서

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

참고문헌

같이 보기