filter: drop-shadow()

예제

기본 예제

drop-shadow-sm과 drop-shadow-xl 같은 유틸리티를 사용해 엘리먼트에 그림자를 추가할 수 있습니다.

<svg class="drop-shadow-md ...">  <!-- ... --></svg><svg class="drop-shadow-lg ...">  <!-- ... --></svg><svg class="drop-shadow-xl ...">  <!-- ... --></svg>

이 방법은 텍스트나 SVG 엘리먼트처럼 불규칙한 모양에 그림자를 적용할 때 유용합니다. 일반적인 엘리먼트에 그림자를 적용하려면 박스 그림자를 사용하는 것이 더 적합할 수 있습니다.

커스텀 값 사용하기

drop-shadow-[<value>] 구문을 사용하세요 drop shadow를 완전히 커스텀한 값으로 설정하려면:

<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">  <!-- ... --></svg>

CSS 변수를 사용하려면 drop-shadow-(<custom-property>) 구문을 사용할 수도 있습니다:

<svg class="drop-shadow-(--my-drop-shadow) ...">  <!-- ... --></svg>

이는 drop-shadow-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a filter: drop-shadow() 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<svg class="drop-shadow-md md:drop-shadow-xl ...">  <!-- ... --></svg>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

--drop-shadow-* 테마 변수를 사용해 프로젝트에서 drop shadow 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }

이제 drop-shadow-3xl 유틸리티를 마크업에서 사용할 수 있습니다:

<svg class="drop-shadow-3xl">  <!-- ... --></svg>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.