CSS box-shadow 완벽 가이드 — 카드, 글로우, 뉴모피즘까지

box-shadow, 그냥 복붙만 하고 계셨나요?

CSS box-shadow는 대부분의 개발자가 "어느 정도만" 배우는 속성입니다. 디자인 시안에서 값을 복사하거나 Stack Overflow에서 찾아 붙여넣고 넘어가죠. 하지만 각 파라미터가 무엇을 하는지 제대로 이해하면, 현대적인 카드의 미묘한 입체감부터 완전한 뉴모피즘 UI, 빛나는 네온 버튼까지 놀랍도록 다양한 효과를 구현할 수 있습니다.

읽으면서 실험해보고 싶다면 ToolPal의 CSS Box Shadow 생성기를 활용해보세요. 실시간으로 결과를 확인하며 CSS를 바로 복사할 수 있습니다.

---

문법 완전 분석

box-shadow: offset-x offset-y blur-radius spread-radius color;

각 파라미터를 정확하게 살펴봅니다:

offset-x — 그림자의 수평 이동. 양수는 오른쪽, 음수는 왼쪽.

offset-y — 그림자의 수직 이동. 양수는 아래쪽(위에서 오는 광원의 표준), 음수는 위쪽.

blur-radius — 그림자의 흐림 정도. 0이면 날카로운 경계. 높을수록 더 부드럽고 확산된 그림자.

spread-radius — 그림자 크기 확장/축소. 양수는 요소보다 크게, 음수는 작게. 선택 사항 (기본값 0).

color — 그림자 색상. 투명도 조절을 위해 rgba() 또는 hsla() 사용 권장. 순수 검정(#000)은 탁해 보이는 경우가 많습니다.

기본적인 그림자:

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

---

inset 키워드

맨 앞에 inset을 추가하면 외부가 아닌 내부 그림자가 생성됩니다:

.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

내부 그림자의 활용처:

• 텍스트 입력창, textarea (오목하게 눌린 느낌)
• 버튼의 눌린 상태
• 뉴모피즘의 "pressed" 상태

---

멀티 레이어 그림자: 현실감의 비밀

box-shadow에서 가장 덜 활용되는 기능이 바로 쉼표로 여러 그림자를 쌓는 것입니다:

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

레이어를 쌓는 방식이 실제 그림자가 만들어지는 방식과 유사합니다. 큰 그림자 하나만 쓰면 종종 평면적이거나 부자연스러워 보입니다.

---

실용적인 UI 효과 레시피

1. 카드 입체감 (Material Design 스타일)

구글의 Material Design은 UI 요소들이 서로 다른 "높이"에 있다는 개념을 대중화했습니다. 높이가 높을수록 더 크고 확산된 그림자를 씁니다.

/* 기본 상태 */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.2s ease;
}

/* 호버 상태 */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

2. 부드러운 그림자 (현대적 미니멀 디자인)

최근 트렌드는 불투명도를 낮추고 블러를 크게 키운 부드러운 그림자입니다:

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

브랜드 색상이 녹아든 그림자:

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. 다크모드를 위한 글로우 효과

글로우는 오프셋 없이, 큰 블러에 채도 높은 색상을 쓴 그림자입니다:

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

네온 효과를 원한다면 여러 색상의 글로우를 쌓으세요:

.neon-element {
  box-shadow:
    0 0 5px #fff,
    0 0 20px #ff00ff,
    0 0 60px #ff00ff;
}

4. 뉴모피즘

뉴모피즘(Neumorphism 또는 Soft UI)은 2020년경 유행한 디자인 트렌드입니다. 요소의 배경색이 컨테이너와 같고, 밝은 그림자와 어두운 그림자를 동시에 씁니다:

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

눌린 상태:

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

뉴모피즘의 한계: 회색 계열 배경에서만 제대로 작동합니다. 접근성 문제도 있습니다 — 낮은 대비로 인해 인터랙티브 요소를 구분하기 어렵습니다.

5. 날카로운 그림자 (레트로 / 볼드 디자인)

블러를 0으로 없애면 날카롭고 오프셋된 그림자가 만들어집니다 — 강렬한 그래픽 디자인에 다시 유행 중인 레트로 스타일:

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

6. 포커스 링 대체

브라우저 기본 아웃라인보다 더 세련된 포커스 표시로 자주 사용됩니다:

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

spread-radius(3px)가 블러나 오프셋 없이 링을 만들어냅니다. 접근성을 위해 WCAG 대비 기준을 충족하는지 확인하세요.

---

흔한 실수들

순수 검정(#000)을 그대로 사용하기: 거의 항상 어색해 보입니다. rgba(0, 0, 0, 0.1)~rgba(0, 0, 0, 0.3) 범위에서 시작하세요.

블러만 크게, 레이어는 하나: 0 20px 60px rgba(0,0,0,0.3) 하나짜리 그림자는 자주 번진 것처럼 보입니다. 2~4개 레이어를 쌓으세요.

배경색을 고려하지 않기: 뉴모피즘은 요소 배경색이 컨테이너와 달라지면 망가집니다.

spread-radius의 음수 활용 모르기: 음수 spread는 그림자를 안쪽으로 당겨 특정 방향에만 그림자를 보이게 할 수 있습니다:

/* 아래쪽에만 그림자 */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

---

성능 고려사항

box-shadow는 브라우저의 컴포지팅 레이어 바깥에서 렌더링됩니다. 대부분의 UI에서는 문제없지만, 많은 요소에 동시에 그림자를 애니메이션화하거나 큰 영역에서 사용할 때는 버벅임이 생길 수 있습니다.

GPU 가속을 위해 filter: drop-shadow() 사용:

/* filter 버전 (GPU 컴포지팅 가능) */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow()는 SVG, 투명 PNG 등 불규칙한 형태에도 작동한다는 장점이 있습니다. 단, inset, 멀티 레이어, spread-radius는 지원하지 않습니다.

---

치트시트

/* 미묘한 카드 입체감 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* Material Design 카드 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* 레이어드 리얼리스틱 */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* 글로우 효과 */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* 뉴모피즘 */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* 레트로 날카로운 그림자 */
box-shadow: 4px 4px 0 #000;

/* 포커스 링 */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* 아래쪽만 그림자 */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* 내부 눌린 상태 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

---

마무리

box-shadow는 5분이면 기초를 배울 수 있지만, 몇 년이 지나도 새로운 트릭을 발견하는 속성입니다. 핵심 포인트:

1. 단일 큰 그림자 대신 여러 레이어를 쌓기
2. 불투명도 낮은 rgba() 사용하기 — 순수 검정 금물
3. inset으로 입력창과 눌린 상태 표현하기
4. 음수 spread로 방향성 있는 그림자 만들기
5. 성능이 중요한 애니메이션에는 filter: drop-shadow() 고려하기

CSS Box Shadow 생성기에서 직접 실험해보는 것이 이 패턴들을 체화하는 가장 빠른 방법입니다.