실행 가능한 CSS 문서: 박스 그림자

Q: box-shadow 문법은 어떻게 되나요?

box-shadow: offset-x offset-y blur spread color;예요. 예를 들면 box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);예요. 두 오프셋만 필수이고, inset을 추가하면 상자 안쪽에 그림자를 그려요.

Q: 아래쪽에만 그림자를 넣으려면 어떻게 하나요?

그림자를 아래로 옮기고 음수 spread로 안쪽으로 당겨서 양옆이 사라지게 해요. box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);

box-shadow의 동작 방식

box-shadow는 요소의 테두리 상자 둘레에 그림자를 그려요. border-radius를 따르고, 레이아웃에서 공간을 차지하지 않으며, 최소 두 값이 필요해요. 가로와 세로로 얼마나 옮길지예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

문법

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

값	뜻	기본값
`inset`	눌린 영역처럼 상자 안쪽에 그림자를 그려요	바깥쪽
offset-x	양수면 오른쪽, 음수면 왼쪽으로 가요	필수
offset-y	양수면 아래, 음수면 위로 가요	필수
blur	가장자리가 얼마나 부드러운지. 음수는 안 돼요	`0` (딱 떨어지는 가장자리)
spread	그림자를 키우거나(양수) 줄여요(음수)	`0`
color	모든 색. 보통 반투명 검정이 가장 보기 좋아요	글자 색

길이 값의 개수가 뜻을 정해요. 두 개는 오프셋, 세 개면 흐림이 추가되고, 네 개면 spread가 추가돼요. 해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

0 0 0 4px #f59e0b(링), inset 0 0 12px #2563eb, -8px -8px 0 #16a34a를 넣어 보세요.

Spread: 링과 한쪽 그림자

spread는 흐리게 하기 전에 그림자 크기를 바꿔요. 여기서 두 가지 패턴이 나와요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

링: 오프셋 없음, 흐림 없음, spread만. 테두리와 달리 요소 크기를 바꾸지 않아서 좋은 포커스 표시가 돼요(:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
틈이 있는 링: 흰색 spread를 더 큰 색 spread 아래에 겹쳐요.
한쪽만: 그림자를 아래로 옮기고 음수 spread로 줄여서 아래쪽으로만 살짝 보이게 해요.

사실적인 깊이를 위한 여러 겹 그림자

실제 그림자는 물체 가까이에는 진하고 선명한 부분이, 더 멀리에는 부드럽고 옅은 부분이 있어요. 두세 겹을 겹치면 큰 흐림 하나보다 훨씬 비슷하게 흉내 낼 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

목록의 첫 번째 그림자가 맨 위에 그려져요. 그림자 색은 순수한 회색이 아니라 반투명 검정이나 배경의 어두운 색조로 해서, 아래에 무엇이 있든 어둡게 만들게 하세요.

Inset 그림자

inset은 표면이 눌린 것처럼 padding 상자 안쪽에 그림자를 그려요. 텍스트 입력 요소, 움푹한 영역, 눌린 버튼에 어울려요.

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

inset 그림자는 배경 위, 콘텐츠 아래에 그려져요. 상자 대신 글자 모양을 따라가는 그림자는 text-shadow예요.

자주 하는 실수

완전히 불투명한 순수 검정 그림자. 어두운 외곽선처럼 보여요. 알파를 10%에서 30%로 쓰세요.
깊이를 위한 거대한 흐림 하나. 작고 선명한 그림자와 크고 부드러운 그림자를 겹치세요.
가장자리에서 잘린 그림자. overflow: hidden인 조상이 잘라 내요. 조상에 padding을 주거나 overflow 규칙을 옮기세요.
음수 흐림. 잘못된 값이라 선언 전체가 무시돼요.
많은 요소에서 box-shadow 애니메이션. 매 프레임 다시 그려요. 무거운 페이지라면 더 큰 그림자를 가진 가상 요소의 opacity를 대신 애니메이션하세요.

자주 묻는 질문

box-shadow 문법은 어떻게 되나요?

box-shadow: offset-x offset-y blur spread color;예요. 예를 들면 box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);예요. 두 오프셋만 필수이고, inset을 추가하면 상자 안쪽에 그림자를 그려요.

box-shadow에서 spread는 무엇을 하나요?

흐리게 하기 전에 그림자를 키우거나(양수) 줄여요(음수). 오프셋도 흐림도 없고 spread가 3px인 그림자는 요소 둘레의 3px 단색 링이에요.

아래쪽에만 그림자를 넣으려면 어떻게 하나요?

그림자를 아래로 옮기고 음수 spread로 안쪽으로 당겨서 양옆이 사라지게 해요. box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);

box-shadow가 레이아웃에 영향을 주나요?

아니요. 그림자는 공간을 차지하지 않고 다른 요소를 움직이지 않아요. 그래서 레이아웃 이동 없이 포커스 링이나 hover 들어 올림 효과를 넣기에 좋아요. 조상의 overflow: hidden에 잘릴 수는 있어요.

box-shadow를 여러 개 쓸 수 있나요?

네, 쉼표로 구분하세요. 첫 번째 그림자가 맨 위에 그려져요. 작고 선명한 그림자와 크고 부드러운 그림자를 겹치면 큰 그림자 하나보다 더 자연스러워 보여요.