box-shadow

요소에 그림자 효과를 추가합니다. X-offset, Y-offset, blur, spread, color 순서로 조합하며, RGBA를 사용하면 투명도가 있는 자연스러운 그림자를 만들 수 있습니다.

클래스 목록

클래스	CSS	설명
`bsn`	box-shadow: none	그림자 제거
`bsinh`	box-shadow: inherit	부모 값 상속
`bsini`	box-shadow: initial	초기값으로 리셋
`bsu`	box-shadow: unset	상속 또는 초기값
`bs0px1px3px0px000000`	box-shadow: 0px 1px 3px 0px #000000	HEX 그림자 (불투명)
`bs0px4px6px0px0-0-0-30`	box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3)	RGBA 그림자 (투명)
`bsi0px2px4px0px0-0-0-20`	box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.2)	Inset 그림자 (내부)

시각적 비교

그림자 강도에 따른 시각적 차이를 비교합니다. 각 박스 위에 마우스를 올려보세요.

None

bsn

그림자 없음. 기본 상태 또는 리셋용

Subtle

bs0px1px3px0px0-0-0-20

미세한 그림자. 카드, 입력 필드에 적합

Medium

bs0px4px6px0px0-0-0-30

중간 강도. 팝오버, 드롭다운에 적합

Large

bs0px10px20px0px0-0-0-40

강한 그림자. 모달, 플로팅 요소에 적합

패턴 분석

box-shadow 클래스의 각 부분이 어떤 역할을 하는지 분해합니다.

bs{X}px{Y}px{B}px{S}px{COLOR}

부분	역할	예시
`bs`	box-shadow 접두사	bs...
`bsi`	inset 접두사 (안쪽 그림자)	bsi...
`{X}px`	X-offset (가로 이동)	0px = 수평 이동 없음
`{Y}px`	Y-offset (세로 이동)	4px = 아래로 4px
`{B}px`	Blur (흐림 반경)	6px = 6px 흐림
`{S}px`	Spread (확산 반경)	0px = 확산 없음
`{HEX}`	HEX 6자리 색상	000000 = 검정
`{R}-{G}-{B}-{A}`	RGBA 색상 (A: 0-100)	0-0-0-30 = rgba(0,0,0,0.3)

자주 쓰는 그림자

실무에서 가장 많이 사용하는 그림자 패턴입니다.

Subtle

bs0px1px3px0px0-0-0-20

box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2)

Medium

bs0px4px6px0px0-0-0-30

box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.3)

Large

bs0px10px20px0px0-0-0-40

box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.4)

Inset

bsi0px2px4px0px0-0-0-20

box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.2)

<!-- Subtle 그림자 (카드) -->
<div class="bs0px1px3px0px0-0-0-20 bg1E1E2E p2rem br8px">
  가벼운 그림자 카드
</div>

<!-- Medium 그림자 (드롭다운) -->
<div class="bs0px4px6px0px0-0-0-30 bg1E1E2E p16px br8px">
  드롭다운 메뉴
</div>

<!-- Large 그림자 (모달) -->
<div class="bs0px10px20px0px0-0-0-40 bg1E1E2E p2rem br8px">
  모달 다이얼로그
</div>

<!-- Inset 그림자 (입력 필드) -->
<input class="bsi0px2px4px0px0-0-0-20 bg18181B p12px br4px bn cFAFAFA" />

HEX vs RGBA

HEX는 불투명한 그림자, RGBA는 투명도가 있는 자연스러운 그림자를 만듭니다.

HEX — 불투명

HEX

색상이 완전히 불투명. 강한 그림자 효과

RGBA — 투명

RGBA

투명도 적용. 자연스럽고 부드러운 그림자

<!-- HEX (불투명 그림자) -->
<div class="bs0px4px6px0px000000 p2rem br8px">
  진하고 딱딱한 그림자
</div>

<!-- RGBA (투명 그림자) — 권장 -->
<div class="bs0px4px6px0px0-0-0-30 p2rem br8px">
  자연스럽고 부드러운 그림자
</div>

Inset 그림자

bsi 접두사를 사용하면 요소 안쪽에 그림자가 생깁니다. 눌린 버튼, 입력 필드, 내부 깊이감 표현에 사용합니다.

일반 그림자 (외부)

bs...

Inset 그림자 (내부)

bsi...

<!-- 일반 그림자 (외부) -->
<div class="bs0px4px6px0px0-0-0-30 p2rem br8px">
  외부 그림자
</div>

<!-- Inset 그림자 (내부) -->
<div class="bsi0px2px4px0px0-0-0-20 p2rem br8px">
  안쪽으로 파인 효과
</div>

<!-- Inset + HEX 색상 -->
<div class="bsi2px4px10px0pxFF0000 p2rem br8px">
  빨간색 내부 그림자
</div>

호버 그림자

기본 상태에서 그림자 없이 시작하고, 호버 시 그림자가 나타나는 패턴입니다. tall200msease와 함께 사용하면 부드러운 전환이 됩니다.

호버하여 그림자 확인

Hover me

<!-- 호버 시 그림자 나타남 (가장 많이 쓰는 패턴) -->
<div class="bsn hover-bs0px4px12px0px6366F1 tall200msease p2rem br8px cp">
  호버하면 보라색 그림자
</div>

<!-- 카드 호버 효과 -->
<div class="bg1E1E2E b1pxsolid27272A br8px p2rem
            bsn hover-bs0px4px12px0px6366F1 tall200msease cp">
  <h3>카드 제목</h3>
  <p>호버 시 그림자가 부드럽게 나타납니다</p>
</div>

팁 & 주의사항

RGBA 그림자가 더 자연스럽다

HEX 색상은 불투명하여 그림자가 딱딱해 보입니다. 0-0-0-20처럼 RGBA로 투명도를 주면 배경과 자연스럽게 섞입니다.

Inset으로 내부 효과 만들기

bsi 접두사를 붙이면 안쪽 그림자가 됩니다. 눌린 버튼, 입력 필드 포커스, 내부 깊이감 표현에 적합합니다.

트랜지션과 함께 사용하기

bsn hover-bs0px4px12px0px6366F1 tall200msease 패턴으로 호버 시 부드럽게 그림자가 나타납니다. 카드, 버튼에 자주 사용됩니다.

성능 고려

box-shadow는 리페인트를 발생시킵니다. 많은 요소에 큰 blur 값을 사용하면 스크롤 성능이 저하될 수 있습니다. blur 값은 필요한 만큼만 사용하세요.

text-shadow border opacity transition border-radius