box-shadow

예제

기본 예제

shadow-sm과 shadow-lg 같은 유틸리티를 사용해 엘리먼트에 다양한 크기의 외부 박스 그림자를 적용할 수 있습니다:

<div class="shadow-md ..."></div><div class="shadow-lg ..."></div><div class="shadow-xl ..."></div>

그림자 색상 설정하기

shadow-indigo-500이나 shadow-cyan-500/50 같은 유틸리티를 사용해 박스 그림자의 색상을 변경할 수 있습니다.

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button><button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button><button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

기본적으로 색상이 있는 그림자는 100%의 불투명도를 가지지만, 불투명도 수정자를 사용해 이를 조절할 수 있습니다.

안쪽 그림자 추가하기

inset-shadow-xs와 inset-shadow-sm 같은 유틸리티를 사용해 엘리먼트에 안쪽 그림자를 적용할 수 있습니다.

<div class="inset-shadow-2xs ..."></div><div class="inset-shadow-xs ..."></div><div class="inset-shadow-sm ..."></div>

이 유틸리티는 폼 컨트롤이나 웰(well) 같은 요소에 유용하게 사용할 수 있습니다.

안쪽 그림자 색상 설정

inset-shadow-indigo-500 및 inset-shadow-cyan-500/50 같은 유틸리티를 사용해 안쪽 박스 그림자의 색상을 변경할 수 있습니다.

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div><div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

기본적으로 색상이 적용된 그림자는 100% 불투명도로 설정되지만, 불투명도 수정자를 사용해 조정할 수 있습니다.

링 추가하기

ring과 ring-<number> 유틸리티를 사용해 엘리먼트에 고체 박스 쉐도우를 적용할 수 있습니다. 예를 들어 ring-2나 ring-4와 같은 클래스를 사용할 수 있습니다.

<button class="ring ...">Subscribe</button><button class="ring-2 ...">Subscribe</button><button class="ring-4 ...">Subscribe</button>

기본적으로 링은 적용된 엘리먼트의 currentColor와 일치합니다.

링 색상 설정하기

ring-indigo-500이나 ring-cyan-500/50 같은 유틸리티를 사용해 링의 색상을 변경할 수 있습니다:

<button class="ring-2 ring-blue-500 ...">Subscribe</button><button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

기본적으로 링은 100% 불투명도(opacity)를 가지지만, 불투명도 수정자를 사용해 조정할 수 있습니다.

안쪽 테두리 추가하기

inset-ring과 inset-ring-<number> 유틸리티를 사용해 엘리먼트에 안쪽으로 들어간 박스 그림자를 적용할 수 있습니다. 예를 들어 inset-ring-2나 inset-ring-4와 같은 유틸리티를 사용할 수 있습니다.

<button class="inset-ring ...">Subscribe</button><button class="inset-ring-2 ...">Subscribe</button><button class="inset-ring-4 ...">Subscribe</button>

기본적으로 안쪽 테두리는 적용된 엘리먼트의 currentColor와 일치합니다.

inset ring 색상 설정하기

inset-ring-indigo-500이나 inset-ring-cyan-500/50 같은 유틸리티를 사용하여 inset ring의 색상을 변경할 수 있습니다.

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button><button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

기본적으로 inset ring은 100%의 불투명도를 가지지만, 불투명도 수정자를 사용하여 조정할 수 있습니다.

박스 그림자 제거하기

shadow-none, inset-shadow-none, ring-0, 그리고 inset-ring-0 유틸리티를 사용해 엘리먼트에 적용된 박스 그림자를 제거할 수 있습니다.

<div class="shadow-none ..."></div>

커스텀 값 사용하기

shadow-[<value>],inset-shadow-[<value>],ring-[<value>], 그리고 inset-ring-[<value>]와 같은 유틸리티를 사용하세요 box shadow를 완전히 커스텀한 값으로 설정하려면:

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

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

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

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

반응형 디자인

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

<div class="shadow-none md:shadow-lg ...">  <!-- ... --></div>

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

테마 커스터마이징

그림자 커스터마이징

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

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

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

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

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

inset 그림자 커스터마이징

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

@theme {  --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }

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

<div class="inset-shadow-md">  <!-- ... --></div>

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

그림자 색상 커스터마이징

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

@theme {  --color-regal-blue: #243c5a; }

이제 shadow-regal-blue,inset-shadow-regal-blue,ring-regal-blue, 그리고 inset-ring-regal-blue 같은 유틸리티를 마크업에서 사용할 수 있습니다:

<div class="shadow-regal-blue">  <!-- ... --></div>

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