Tailwind CSS home page
  1. Effects
  2. Mix Blend Mode

Quick reference

Class
Properties
mix-blend-normalmix-blend-mode: normal;
mix-blend-multiplymix-blend-mode: multiply;
mix-blend-screenmix-blend-mode: screen;
mix-blend-overlaymix-blend-mode: overlay;
mix-blend-darkenmix-blend-mode: darken;
mix-blend-lightenmix-blend-mode: lighten;
mix-blend-color-dodgemix-blend-mode: color-dodge;
mix-blend-color-burnmix-blend-mode: color-burn;
mix-blend-hard-lightmix-blend-mode: hard-light;
mix-blend-soft-lightmix-blend-mode: soft-light;
mix-blend-differencemix-blend-mode: difference;
mix-blend-exclusionmix-blend-mode: exclusion;
mix-blend-huemix-blend-mode: hue;
mix-blend-saturationmix-blend-mode: saturation;
mix-blend-colormix-blend-mode: color;
mix-blend-luminositymix-blend-mode: luminosity;
mix-blend-plus-darkermix-blend-mode: plus-darker;
mix-blend-plus-lightermix-blend-mode: plus-lighter;

Basic usage

엘리먼트의 블렌드 모드 설정하기

mix-blend-* 유틸리티를 사용해 엘리먼트의 콘텐츠가 배경과 어떻게 블렌드될지 제어할 수 있습니다.

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

Applying conditionally

호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:mix-blend-overlay 를 사용하면 mix-blend-overlay 유틸리티를 hover 상태에서만 적용할 수 있습니다.

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

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:mix-blend-overlay를 사용하면 중간 화면 크기 이상에서만 mix-blend-overlay 유틸리티를 적용할 수 있습니다.

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

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.