box-shadow 생성기

사용법

box-shadow는 가로 오프셋, 세로 오프셋, 흐림(blur), 번짐(spread), 색상 순서로 값을 씁니다. 여기서는 여러 레이어를 쉼표로 이어 붙여 겹칠 수 있습니다. 하나의 진한 그림자보다 흐림과 투명도가 다른 그림자를 2~4겹 쌓으면 훨씬 자연스러운 깊이감이 나옵니다.

inset을 켜면 요소 안쪽으로 그림자가 들어가 눌린 느낌이나 내부 경계선 효과를 줍니다. 색상은 보통 검정에 낮은 투명도(0.1~0.2)를 씁니다. 완전 불투명한 회색보다 반투명 검정이 배경색과 자연스럽게 섞입니다.

실제 응용

두 겹이 각각 맡는 역할이 다르다

그림자를 겹치라는 말은 자주 보이지만, 왜 그런지는 잘 설명되지 않습니다. 두 겹은 서로 다른 것을 표현합니다.

• 가까운 그림자 (작은 blur, 작은 오프셋, 조금 진하게) — 물체가 바닥에 닿아 있는 지점을 나타냅니다. 이게 없으면 요소가 공중에 붕 뜬 것처럼 보입니다.
• 먼 그림자 (큰 blur, 큰 오프셋, 아주 연하게) —얼마나 떠 있는지를 나타냅니다. 이게 없으면 종이를 바닥에 딱 붙여 놓은 것처럼 납작해 보입니다.

진한 그림자 하나로는 둘 중 하나만 표현됩니다. 자연스러운 깊이감이 안 나오는 대부분의 경우가 여기에 해당합니다.

세 단계로 정해 두고 재사용한다

요소마다 그림자를 새로 만들면 화면이 어수선해집니다. 떠 있는 정도를 세 단계로 정하고 그 안에서만 쓰세요. 값이 아니라 의미로 이름을 붙이는 것이 핵심입니다.

:root {
  /* 카드·입력 칸: 살짝 떠 있음 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
               0 2px 6px -2px rgba(0, 0, 0, 0.08);

  /* 드롭다운·툴팁: 본문 위에 떠 있음 */
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.12),
               0 8px 24px -4px rgba(0, 0, 0, 0.14);

  /* 모달·시트: 화면 전체 위에 떠 있음 */
  --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.16),
               0 24px 48px -12px rgba(0, 0, 0, 0.24);
}

단계가 올라갈수록 blur와 오프셋이 함께 커집니다. 진하기만 키우면 떠 있는 느낌이 아니라 그냥 어두워질 뿐입니다.

다크 모드에서는 그림자가 보이지 않는다

놓치기 쉬운 부분입니다. 어두운 배경 위의 검은 그림자는 사실상 보이지 않습니다. 라이트 모드에서 카드가 잘 떠 보이던 화면이, 다크 모드로 바꾸면 카드와 배경의 경계가 사라져 평평해집니다.

다크 모드에서는 다른 수단으로 대신합니다.

• 연한 테두리 — 1px solid rgba(255, 255, 255, 0.1)이 가장 무난합니다.
• 배경 밝기 차이 — 떠 있는 요소일수록 배경을 한 단계 밝게. 실제 머티리얼 디자인이 쓰는 방식입니다.
• 위쪽 안쪽 하이라이트 — inset 0 1px 0 rgba(255, 255, 255, 0.06)으로 윗면에 빛이 닿은 느낌을 줍니다.

검정 대신 배경을 어둡게 한 색

rgba(0, 0, 0, 0.1)은 어디에나 무난하지만 회색빛이 돌아 살짝 탁해 보입니다. 배경이 색을 띠고 있다면 그 색을 어둡게 만든 값을 그림자 색으로 쓰면 훨씬 자연스럽습니다. 파란 계열 배경에는 남색 계열 그림자, 따뜻한 베이지 배경에는 갈색 계열 그림자입니다. 실제 그림자도 검정이 아니라 주변 색을 머금기 때문입니다.

spread 음수로 그림자를 아래로 몰아준다

0 8px 24px처럼 아래로 내린 그림자는 blur가 커지면서 위쪽·좌우로도 번집니다. 요소를 감싸는 후광처럼 보여 지저분해지는 원인입니다.

이때 spread를 음수로 주면(0 8px 24px -4px) 그림자 전체가 줄어들어 위로 새는 부분이 사라지고, 아래쪽에만 남습니다. 위 예시의 모든 먼 그림자에 음수 spread가 들어간 이유입니다. 미리보기에서 spread 값만 0과 -4 사이로 바꿔 보면 차이가 바로 보입니다.