CSS / Reference / box-shadow

box-shadow는 요소 박스에 바깥 또는 안쪽 그림자를 그립니다. 가로·세로 오프셋은 필수이고 흐림과 확산은 선택 사항입니다. 그림자는 일반적인 레이아웃 공간을 추가하지 않으므로 인접 요소와 겹치거나 잘릴 수 있습니다.

문법과 주요 값

.card { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.inset { box-shadow: inset 0 0 0 3px #006c9c; }

값의 적용 범위와 문법은 MDN의 box-shadow 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 box-shadow-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>box-shadow 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; height: 100px; padding: 18px; background: #bfe3ff; margin: 14px; }
.target { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.reference { box-shadow: inset 0 0 0 3px #006c9c; }
</style>
</head>
<body>
<main id="demo">
<h1>box-shadow 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">바깥 그림자</p><div class="target">박스 그림자</div></div><div class="b"><p class="label">inset 안쪽 그림자</p><div class="reference">박스 그림자</div></div></section>
</main>
</body>
</html>

첫 박스는 오른쪽 아래로 흐린 그림자가 생기고 두 번째 박스는 안쪽에 색 띠가 생깁니다. 그림자 때문에 주변 박스의 위치가 자동으로 밀리지는 않습니다.

색과 둥근 모서리

그림자 색을 생략하면 currentColor가 사용되므로 텍스트 색에 따라 결과가 달라질 수 있습니다. 명시적인 알파 색을 사용하면 의도를 읽기 쉽습니다. box-shadow는 border-radius의 모양을 따르지만 이미지 자체의 투명한 윤곽을 따라 그림자를 만드는 필터와는 다릅니다.

잘림과 성능

상위 요소의 overflow: hidden이나 clip 때문에 바깥 그림자가 잘릴 수 있습니다. 큰 흐림 반경과 많은 레이어를 넓은 영역에 반복하면 렌더링 비용이 늘 수 있으므로 필요한 정도로 제한하고 실제 화면에서 확인하세요. 글자 자체의 그림자는 text-shadow를 사용합니다.

적용되지 않거나 예상과 다를 때

• 그림자가 잘리면 상위 overflow와 박스 주변 공간을 확인합니다.
• none이나 다른 box-shadow 규칙이 덮어쓰는지 확인합니다.

관련 설정을 함께 조정할 때는 글자 그림자인 text-shadow, 넘친 그림자의 표시와 overflow을 참고하세요.