CSS box-shadow는 실제로 사용하기 전까지는 단순해 보이는 속성입니다. 오프셋? 블러? 스프레드? 인셋? 손으로 시행착오를 거쳐 올바르게 만드는 것은 시간이 걸립니다. 박스 섀도우 생성기를 사용하면 문법 문제를 제거하고 디자인에 집중할 수 있습니다.

박스 섀도우 생성기 사용해보기 →

box-shadow 문법

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;
값설명
inset선택사항. 섀도우가 요소 안쪽에 그려짐.
offset-x수평 오프셋. 양수는 오른쪽, 음수는 왼쪽으로 이동.
offset-y수직 오프셋. 양수는 아래, 음수는 위로 이동.
blur-radius선택사항 (기본값 0). 값이 클수록 섀도우가 부드러워짐.
spread-radius선택사항 (기본값 0). 양수는 확장, 음수는 축소.
color임의의 CSS 색상 값. 투명도에는 rgba() 사용.

자주 사용되는 패턴

부드러운 카드 섀도우

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

2레이어 접근 방식으로 자연스러운 깊이를 만듭니다: 바닥에 타이트한 섀도우, 그 위에 넓은 앰비언트 섀도우. 이것이 Material Design의 고도 시스템 뒤에 있는 패턴입니다.

인셋 섀도우 (내부 발광)

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

텍스트 입력, 눌린 버튼 상태, 또는 오목하게 보여야 하는 요소에 유용합니다.

블러 없음 (하드 섀도우)

box-shadow: 4px 4px 0 #000;

블러를 0으로 하면 날카롭고 오프셋된 섀도우가 생깁니다 — 네오 브루탈리스트 UI 디자인에서 인기 있습니다. 색상이 어두울 필요는 없습니다. #facc15 (노란색) 액센트 섀도우도 시도해보세요.

글로우 효과

box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.5);

두 오프셋을 0으로, 블러와 스프레드를 비0으로: 섀도우가 대칭적으로 방사됩니다. 호버 상태에 브랜드 색상과 함께 사용하세요.

여러 섀도우 레이어링

쉼표로 구분하여 섀도우를 쌓을 수 있습니다:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

각 레이어에서 오프셋과 반지름이 두 배가 됩니다. 결과는 단일한 거친 에지가 없는 부드럽고 현실적인 섀도우입니다.

성능 관련 참고사항

box-shadow는 페인트를 트리거하지만 레이아웃은 트리거하지 않습니다. transform 또는 will-change: transform이 있는 요소에 적용하면 대부분의 브라우저에서 하드웨어 가속이 적용됩니다. 저전력 기기에서는 box-shadow 애니메이션을 피하세요 — 대신 가상 요소의 opacity를 애니메이션하세요:

.card::after {
  content: '';
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::after {
  opacity: 1;
}

브라우저 지원

box-shadow는 모든 현대 브라우저에서 완전히 지원됩니다. 접두사가 필요 없습니다. inset 키워드와 다중 섀도우도 완전히 지원됩니다.

왜 생성기를 사용하는가

네 개의 숫자 값과 색상을 수동으로 조정하는 것은 느립니다. 비주얼 생성기를 사용하면:

  • 오프셋을 드래그하여 섀도우를 실시간으로 업데이트
  • 슬라이더로 블러와 스프레드 조정
  • 인셋 모드 토글
  • CSS를 프로젝트에 바로 복사

박스 섀도우 생성기 열기 →

빠른 참고

효과CSS
드롭 섀도우box-shadow: 0 4px 6px rgba(0,0,0,0.1)
인셋box-shadow: inset 0 2px 4px rgba(0,0,0,0.15)
글로우box-shadow: 0 0 8px 2px rgba(99,102,241,0.4)
하드 섀도우box-shadow: 3px 3px 0 #000
섀도우 없음box-shadow: none

관련 도구