05 — Blend Modes & Isolation

한 줄 답: Blend mode는 두 픽셀이 만나는 곳에서 어떤 수식으로 합성할지를 정하는 16개의 함수다. mix-blend-mode는 요소와 그 뒤, background-blend-mode는 한 요소의 다중 배경 사이에 적용된다. 잘못 쓰면 페이지 전체로 blend가 새어나가므로 isolation: isolate로 stacking context를 잘라 경계를 잡아야 한다.

Why — 왜 blend가 필요한가

표준 합성은 알파 over — 위 픽셀이 알파에 따라 아래를 덮는다. 하지만 디자인에서는 다른 합성 방식을 자주 원한다:

로고를 사진 위에 얹는데 사진 색을 따라가게 (multiply, screen)
두 그라데이션을 색공간에서 더하기 (add, plus-lighter)
그림자 영역에서 색을 강조 (overlay)
흰 배경 위 검은 글씨를 다크모드에서 자동 반전 (difference, exclusion)

Photoshop은 1994년부터 16가지 blend mode를 가졌고, CSS는 2015년 Compositing and Blending Level 1에서 그 거의 전부를 표준화했다.

How — 합성 모델

속성	적용 위치	영향 범위
`mix-blend-mode`	자식 요소	이 요소 + 그 뒤 (같은 stacking context)
`background-blend-mode`	다중 배경 가진 요소	이 요소 내부의 배경 레이어들끼리
`isolation: isolate`	부모 요소	새 stacking context → blend 경계

What — 16가지 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;  /* difference의 부드러운 버전 */
mix-blend-mode: hue;        /* hue만 위, 나머지 아래 */
mix-blend-mode: saturation; /* saturation만 위 */
mix-blend-mode: color;      /* hue + saturation 위 */
mix-blend-mode: luminosity; /* lightness만 위 */
 
/* CSS Compositing Level 2 추가 */
mix-blend-mode: plus-darker;
mix-blend-mode: plus-lighter; /* 알파를 단순 더하기 (모달 페이드인 등) */

다섯 그룹

그룹	멤버	효과
Darken	multiply, darken, color-burn	곱하기 — 어두워짐
Lighten	screen, lighten, color-dodge, plus-lighter	반전 곱 — 밝아짐
Contrast	overlay, hard-light, soft-light	어두운 곳/밝은 곳 다른 처리
Inversion	difference, exclusion	색 반전 효과
HSL 분리	hue, saturation, color, luminosity	색·밝기 분리 처리

자주 쓰는 6가지 패턴

1) Multiply — 로고를 종이 위에

.logo-on-photo {
  mix-blend-mode: multiply;
}
/* 흰색은 투명처럼, 검정은 그대로 — 사진 위에 잉크처럼 */

검은 글씨 SVG 로고를 컬러 사진 위에 얹을 때 사실상 표준.

2) Screen — 발광 효과

.glow {
  mix-blend-mode: screen;
  background: oklch(70% 0.2 280);
}
/* 어두운 배경에 색이 더해지면서 빛나는 듯 */

다크 테마의 hero 섹션, 별·파티클 효과.

3) Difference — 자동 반전 텍스트

.smart-text {
  color: white;
  mix-blend-mode: difference;
}
/* 흰 배경에선 검정처럼, 검은 배경에선 흰색처럼 */

스크롤하면서 배경색이 바뀌어도 글씨가 자동으로 가독성 유지. 다크모드 토글 없이 작동.

4) `background-blend-mode` — 사진 + 그라데이션 합성

.hero {
  background:
    linear-gradient(in oklch, oklch(50% 0.2 254 / 0.8), oklch(30% 0.2 280 / 0.8)),
    url(/hero.jpg) center / cover;
  background-blend-mode: multiply;
  /* 그라데이션과 사진이 multiply 합성 → 사진에 색감 입힘 */
}

같은 요소의 다중 배경에만 적용. 가장 자주 쓰는 패턴이 gradient + image + multiply / overlay / soft-light.

5) `plus-lighter` — 모달 페이드 시 알파 누적

.fade-stack {
  mix-blend-mode: plus-lighter;
}
/* 여러 반투명 레이어가 *합산 알파*로 합성 — Apple iOS 스타일 */

iOS Safari가 시스템 UI에서 자주 쓰는 모드. 일반 normal은 over 합성이라 위 레이어가 아래를 덮지만, plus-lighter는 알파를 단순 더하기 — 두 반투명이 만나도 자연스럽게 진해진다.

6) HSL 분리 — `color` 모드

.tint {
  mix-blend-mode: color;
  background: oklch(70% 0.2 254);
}
/* 아래 사진의 *밝기는 유지*, hue+saturation만 파랑으로 — 톤다운 사진 */

흑백 사진에 색을 입히는 효과. 밝기 정보는 아래에서, 색은 위에서. 영화의 컬러 그레이딩과 비슷.

What-if — Isolation이 없으면

1) Blend가 형제 너머로 새어나간다

<div class="parent">
  <img src="/photo.jpg" />
  <div class="overlay">overlay text</div>  {/* mix-blend-mode: multiply */}
</div>
<div class="elsewhere">이것도 blend가 적용될 수 있다</div>

.overlay { mix-blend-mode: multiply; }

문제: mix-blend-mode는 동일 stacking context의 모든 뒤 픽셀과 합성한다. parent가 stacking context를 안 만들면, blend가 parent 밖까지 새어나가 다른 형제 요소까지 영향.

해결:

.parent {
  isolation: isolate;  /* 새 stacking context → blend 경계 */
}

isolation: isolate는 오로지 stacking context를 만들기 위한 속성이다. transform·filter·opacity 같은 부작용 없이 깔끔하게.

2) `background-blend-mode`는 같은 요소 안만

/* 두 요소 사이 — 안 됨 */
.a { background: red; background-blend-mode: multiply; }
.b { background: blue; }
 
/* 다중 배경 — 됨 */
.c {
  background:
    linear-gradient(red, transparent),
    url(/photo.jpg);
  background-blend-mode: multiply;
}

background-blend-mode는 내부 다중 배경 레이어끼리만. 형제·자식과는 무관.

3) `mix-blend-mode`와 `opacity` 충돌

.layer {
  opacity: 0.5;
  mix-blend-mode: multiply;
}

opacity: 0.5는 isolated group을 만든다. 그래서 mix-blend-mode가 그 그룹 안에서만 적용되어 의도와 달라지는 경우가 있다. 의도가 0.5로 흐리되 multiply는 외부와 라면, alpha를 색상에 직접 넣어야 한다:

.layer {
  background: rgb(255 0 0 / 0.5);  /* opacity 대신 알파 채널 */
  mix-blend-mode: multiply;
}

4) 모바일 성능

Blend mode는 paint·composite 단계에 GPU 셰이더로 처리되지만, 큰 영역 + multiply/screen 같은 단순 모드는 빠르고, overlay·soft-light처럼 분기 있는 모드는 모바일에서 비쌀 수 있다. 전체 페이지에 blend를 거는 건 피하는 편.

5) 접근성 — 콘트라스트 변동

mix-blend-mode: difference로 자동 반전하는 텍스트는 배경에 따라 콘트라스트가 흔들린다. WCAG AA(4.5:1) 만족이 동적이라 자동 검증 도구가 잘 못 잡는다. 중요한 텍스트는 blend 대신 고정 색 + 다크모드 토글이 안전.

Insight — Blend의 역사

“Photoshop 3.0(1994)의 16개 blend mode가 21년 만에 브라우저로 옮겨왔다”

1994년 Photoshop 3.0에서 layer와 blend mode가 도입됐다. 이후 모든 디자인 도구의 사실상 표준이 됐다. 흥미로운 점은 Photoshop의 mode가 수학적으로 어디서 왔는가인데, 1980년대 Porter-Duff compositing(픽사 알고리즘) + 프린트 잉크 합성 모델의 융합이다.

CSS는 2009년에야 Compositing을 명세화하기 시작했다. Webkit/Chrome이 2014년부터 구현했고, Safari는 macOS 자체가 blend를 OS 수준에서 쓰기 때문에 적극적이었다. Firefox는 2017년에 합류.

흥미로운 반전: isolation: isolate는 의도적으로 디자인된 속성이다. transform·opacity·filter가 부작용으로 stacking context를 만들지만, blend를 위해 그것만 하는 속성이 필요했다 — 그래서 오직 stacking context 생성만 하는 단일 책임 속성으로 만들어졌다. CSS에서 흔치 않은 목적 한 가지 속성.

또 하나의 반전: plus-lighter는 iOS UI의 비밀이다. iOS 14 이후 모든 알림 배너·모달의 페이드 트랜지션이 normal이 아니라 plus-lighter다. 그래서 두 알림이 겹칠 때 어색하지 않고 자연스럽게 진해진다. 웹에서 Apple 느낌을 내려면 mix-blend-mode: plus-lighter가 핵심.

요약 + Mermaid

합성 = 알파 over (기본) + 16개 blend mode.
mix-blend-mode: 요소 ↔ 뒤. background-blend-mode: 한 요소의 배경끼리.
isolation: isolate 로 stacking context를 잘라 blend 경계 만들기 — 사실상 필수 짝.
multiply: 종이/잉크. screen: 발광. difference: 자동 반전. color: 톤다운. plus-lighter: iOS 페이드.
opacity는 isolated group을 만들어 blend 의도와 충돌 — 알파를 색상에 직접.
전체 페이지 blend는 모바일 성능 주의, 접근성 콘트라스트 동적 변동도 주의.

다음: 06-background — 다중 배경·background-clip: text·attachment의 함정.

04 — Filter & backdrop-filter 06 — Background (image·clip·attachment·multiple)