<blend-mode>

CSS <blend-mode> 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. background-blend-mode (en-US)와 mix-blend-mode 속성에서 사용합니다.

최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.

구문

<blend-mode> 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.

Values

normal: 배경색에 상관하지 않고 최상단 색을 사용합니다. 두 장의 불투명한 종이를 겹친 것과 같습니다.
multiply: 최종 색은 전경과 배경색을 곱한 값입니다. 검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다. 투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.
screen: 최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다. 검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다. 프로젝터 두 대로 이미지를 겹친 것과 같습니다.
overlay: 배경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다. hard-light와 같지만 배경과 전경을 뒤집은 것입니다.
darken: 최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.
lighten: 최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.
color-dodge: 최종 색은 배경색을 전경색의 역으로 나눈 결과입니다. 검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다. screen과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.
color-burn: 최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다. 하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다. multiply와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.
hard-light: 전경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다. overlay와 같지만 배경과 전경을 뒤집은 것입니다. 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.
soft-light: hard-light와 유사하지만 더 부드럽습니다. hard-light와 비슷하게 동작합니다. 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.
difference: 최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다. 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.
exclusion: difference와 유사하지만 더 적은 대비를 가진 색을 반환합니다. difference와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.
hue: 최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.
saturation: 최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다. 색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.
color: 최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다. 회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.
luminosity: 최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다. color와 동일하지만 배경과 전경을 뒤집은 것입니다.

Description

For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, performs a calculation on them, and returns a new color value.

Changes between blend modes are not interpolated. Any change occurs immediately.

Formal syntax

<blend-mode> = 
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

Examples

Example using "normal"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: normal;
}

Example using "multiply"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: multiply;
}

Example using "screen"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: screen;
}

Example using "overlay"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: overlay;
}

Example using "darken"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: darken;
}

Example using "lighten"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: lighten;
}

Example using "color-dodge"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: color-dodge;
}

Example using "color-burn"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: color-burn;
}

Example using "hard-light"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: hard-light;
}

Example using "soft-light"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: soft-light;
}

Example using "difference"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: difference;
}

Example using "exclusion"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: exclusion;
}

Example using "hue"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: hue;
}

Example using "saturation"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: saturation;
}

Example using "color"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: color;
}

Example using "luminosity"

<div id="div"></div>

#div {
  width: 300px;
  height: 300px;
  background: url('br.png'),
              url('tr.png');
  background-blend-mode: luminosity;
}

In the following example, we have a <div> with two background images set on it — a Firefox logo on top of a linear gradient. Below it, we have a provided a <select> menu that allows you to change the background-blend-mode applied to the <div>, allowing you to compare the different blend mode effects.

HTML

<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

CSS

div {
  width: 300px;
  height: 300px;
  background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center,
  linear-gradient(to bottom, blue, orange);
}

JavaScript

const selectElem = document.querySelector('select');
const divElem = document.querySelector('div');

selectElem.addEventListener('change', () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

Result

명세서

Specification
Compositing and Blending Level 2 # ltblendmodegt

브라우저 호환성

BCD tables only load in the browser