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선택사항. 생략하면 currentcolor. 임의의 CSS 색상 값. 투명도에는 rgba() 사용.

inset과 색상은 길이 값 뒤에 써도 됩니다. 길이 값은 붙여서 이 순서대로 씁니다 (MDN: box-shadow).

자주 사용되는 패턴

부드러운 카드 섀도우

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

2레이어 접근 방식으로 자연스러운 깊이를 만듭니다: 요소에 가까운 진하고 타이트한 섀도우와 옅고 부드러운 섀도우의 조합입니다.

인셋 섀도우 (내부 발광)

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);

각 레이어에서 오프셋과 반지름이 두 배가 됩니다. 결과는 단일한 거친 에지가 없는 부드럽고 현실적인 섀도우입니다. 이 기법은 Tobias Ahlin의 Smoother & sharper shadows with layered box-shadows에 설명되어 있습니다.

성능 관련 참고사항

box-shadow는 페인트를 트리거하지만 레이아웃은 트리거하지 않습니다. box-shadow 트랜지션은 요소가 별도 컴포지터 레이어에 있어도 프레임마다 다시 그려집니다. 저전력 기기에서는 box-shadow 애니메이션을 피하세요 — 대신 최종 섀도우를 가진 가상 요소의 opacity를 애니메이션하세요 (Tobias Ahlin: How to animate box-shadow):

.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  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를 프로젝트에 바로 복사

ZeroTool 생성기는 한 번에 섀도우 한 겹을 편집합니다 (오프셋과 스프레드 −5050 px, 블러 0100 px, 불투명도 0~100%). 여러 겹이 필요하면 여러 번의 출력을 쉼표로 이어 붙이세요.

박스 섀도우 생성기 열기 →

빠른 참고

효과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

관련 도구