혼합 모드

혼합 모드 (Mix Blend Mode)

요소의 콘텐츠와 배경이 같은 스태킹 컨텍스트 안의 다른 콘텐츠와 어떻게 섞일지(blend) 정하는 유틸리티예요. CSS의 mix-blend-mode 속성을 조절해요.

출처: 문서

본문

클래스와 스타일

mix-blend-normal — mix-blend-mode: normal;
mix-blend-multiply — mix-blend-mode: multiply;
mix-blend-screen — mix-blend-mode: screen;
mix-blend-overlay — mix-blend-mode: overlay;
mix-blend-darken — mix-blend-mode: darken;
mix-blend-lighten — mix-blend-mode: lighten;
mix-blend-color-dodge — mix-blend-mode: color-dodge;
mix-blend-color-burn — mix-blend-mode: color-burn;
mix-blend-hard-light — mix-blend-mode: hard-light;
mix-blend-soft-light — mix-blend-mode: soft-light;
mix-blend-difference — mix-blend-mode: difference;
mix-blend-exclusion — mix-blend-mode: exclusion;
mix-blend-hue — mix-blend-mode: hue;
mix-blend-saturation — mix-blend-mode: saturation;
mix-blend-color — mix-blend-mode: color;
mix-blend-luminosity — mix-blend-mode: luminosity;
mix-blend-plus-darker — mix-blend-mode: plus-darker;
mix-blend-plus-lighter — mix-blend-mode: plus-lighter;

기본 예제

mix-blend-overlay나 mix-blend-soft-light 같은 유틸리티를 쓰면 같은 스태킹 컨텍스트 안에서 요소의 콘텐츠와 배경이 다른 콘텐츠와 어떻게 섞일지 정할 수 있어요.

<div class="flex justify-center -space-x-14">
  <div class="bg-blue-500 mix-blend-multiply ..."></div>
  <div class="bg-pink-500 mix-blend-multiply ..."></div>
</div>

혼합 격리하기

부모 요소에 isolate 유틸리티를 쓰면 새로운 스태킹 컨텍스트를 만들어서 뒤에 있는 콘텐츠와의 혼합을 막을 수 있어요.

<div class="isolate flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>
<div class="flex justify-center -space-x-14">
  <div class="bg-yellow-500 mix-blend-multiply ..."></div>
  <div class="bg-green-500 mix-blend-multiply ..."></div>
</div>

첫 번째 묶음은 isolate가 있어서 서로만 섞이고, 두 번째 묶음은 주변 배경과도 섞이는 차이를 확인해 보세요.

반응형 디자인

mix-blend-mode 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

<div class="mix-blend-multiply md:mix-blend-overlay ...">
  <!-- ... -->
</div>

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.