mix-blend-mode

요소가 배경 및 다른 요소와 어떻게 색상 혼합되는지를 제어하는 속성입니다. Photoshop의 레이어 블렌드 모드와 동일한 개념으로, 겹치는 영역의 색상 합성 방식을 결정합니다.

클래스 목록

클래스	CSS	설명
`mbmn`	mix-blend-mode: normal	기본값. 혼합하지 않음
`mbmm`	mix-blend-mode: multiply	곱하기. 어두운 방향으로 혼합 (흰색 → 투명)
`mbms`	mix-blend-mode: screen	스크린. 밝은 방향으로 혼합 (검정 → 투명)
`mbmo`	mix-blend-mode: overlay	오버레이. 밝은 부분은 screen, 어두운 부분은 multiply
`mbmd`	mix-blend-mode: darken	더 어두운 색상을 선택
`mbml`	mix-blend-mode: lighten	더 밝은 색상을 선택

시각적 비교

인디고 배경 위에 빨간색 요소를 겹쳐 각 blend mode의 효과를 비교합니다.

mbmn

혼합 없이 그대로 표시

mbmm

색상을 곱해 어둡게

mbms

색상을 합산해 밝게

mbmo

밝고 어두운 부분 각각 처리

mbmd

더 어두운 색만 남김

mbml

더 밝은 색만 남김

텍스트 블렌딩

텍스트에 blend-mode를 적용하면 배경과 자연스럽게 어우러지는 효과를 만들 수 있습니다.

BLEND

mbmnmbmmmbmsmbmombmdmbml

코드 예시

<!-- 컬러 오버레이 효과 -->
<div class="pr bg6366F1 h20rem br8px oh">
  <div class="pa t0 l0 w100p h100p bgEF4444 mbmm"></div>
  <p class="pa b2rem l2rem cFFFFFF fs2rem fw700">Multiply 효과</p>
</div>

<!-- 이미지 위 텍스트 블렌딩 -->
<div class="pr bg27272A h16rem br8px oh df jcc aic">
  <h2 class="c6366F1 fs4rem fw800 mbms">SCREEN</h2>
</div>

<!-- isolation으로 범위 제한 -->
<div class="ison pr bg18181B p2rem br8px">
  <div class="w8rem h8rem bg6366F1 br8px"></div>
  <div class="w8rem h8rem bgEF4444 br8px mbmm neg-mt2rem ml2rem"></div>
  <!-- blend는 ison 내부에서만 적용 -->
</div>

<!-- 겹치는 원 효과 -->
<div class="ison pr h16rem df jcc aic">
  <div class="pa w10rem h10rem bgEF4444 br100p mbms"></div>
  <div class="pa w10rem h10rem bg22C55E br100p mbms ml4rem"></div>
  <div class="pa w10rem h10rem bg6366F1 br100p mbms ml2rem mt4rem"></div>
</div>

팁 & 주의사항

multiply vs screen

mbmm(multiply)는 어두운 쪽으로 혼합되고, mbms(screen)는 밝은 쪽으로 혼합됩니다. multiply는 흰색이 투명해지고, screen은 검정이 투명해집니다.

isolation으로 범위 제한

blend-mode가 의도치 않게 부모 밖으로 번지면, 부모에 ison(isolation: isolate)을 적용하여 범위를 제한하세요.

배경색이 있어야 효과가 보임

mix-blend-mode는 뒤에 있는 요소의 색상과 혼합됩니다. 투명한 배경 위에서는 효과가 나타나지 않습니다.

isolation opacity background filter color