CSS Box Shadow 완벽 가이드 2026

버튼에 입체감을, 카드에 깊이감을, UI에 세련됨을 더하는 box-shadow. 2026년 웹 디자인에서 그림자는 단순한 장식이 아닌 UX의 핵심 요소입니다.

---

box-shadow 기본 문법

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

---

기본 예제

단순 그림자

/* 기본 드롭 섀도우 */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 더 강한 그림자 */
.card-elevated {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

방향별 그림자

/* 오른쪽 아래 */
.shadow-br { box-shadow: 4px 4px 8px rgba(0,0,0,0.2); }

/* 왼쪽 위 */
.shadow-tl { box-shadow: -4px -4px 8px rgba(0,0,0,0.2); }

/* 전체 방향 */
.shadow-all { box-shadow: 0 0 15px rgba(0,0,0,0.3); }

---

다중 그림자

쉼표로 여러 그림자를 조합할 수 있습니다.

/* 부드러운 다층 그림자 */
.soft-shadow {
  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);
}

/* 리얼리스틱 그림자 */
.realistic {
  box-shadow:
    0 2.8px 2.2px rgba(0,0,0,0.02),
    0 6.7px 5.3px rgba(0,0,0,0.028),
    0 12.5px 10px rgba(0,0,0,0.035),
    0 22.3px 17.9px rgba(0,0,0,0.042),
    0 41.8px 33.4px rgba(0,0,0,0.05),
    0 100px 80px rgba(0,0,0,0.07);
}

---

inset 그림자

inset 키워드로 내부 그림자를 만듭니다.

/* 기본 inset */
.inset-shadow {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 눌린 버튼 효과 */
.pressed-button {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.3),
    inset 0 -1px 2px rgba(255,255,255,0.1);
}

/* 입력 필드 포커스 */
.input:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),
              0 0 0 3px rgba(59,130,246,0.3);
}

---

디자인 트렌드별 예제

1. Material Design 그림자

/* Elevation 1 */
.md-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

/* Elevation 2 */
.md-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12); }

/* Elevation 3 */
.md-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10); }

/* Elevation 4 */
.md-4 { box-shadow: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05); }

/* Elevation 5 */
.md-5 { box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

2. 뉴모피즘 (Neumorphism)

/* 뉴모피즘 배경 */
.neumorphism {
  background: #e0e5ec;
  box-shadow:
    9px 9px 16px rgba(163,177,198,0.6),
    -9px -9px 16px rgba(255,255,255,0.5);
}

/* 뉴모피즘 눌림 */
.neumorphism-pressed {
  background: #e0e5ec;
  box-shadow:
    inset 6px 6px 10px rgba(163,177,198,0.6),
    inset -6px -6px 10px rgba(255,255,255,0.5);
}

/* 뉴모피즘 버튼 */
.neumorphism-button {
  background: linear-gradient(145deg, #cacfd6, #f0f5fc);
  box-shadow:
    5px 5px 10px #a3b1c6,
    -5px -5px 10px #ffffff;
}

3. 글래스모피즘 (Glassmorphism)

.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}

4. 네온 효과

/* 네온 글로우 */
.neon-blue {
  box-shadow:
    0 0 5px #00f,
    0 0 10px #00f,
    0 0 20px #00f,
    0 0 40px #00f;
}

.neon-pink {
  box-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff;
}

/* 애니메이션 네온 */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 5px #0ff, 0 0 20px #0ff; }
  50% { box-shadow: 0 0 10px #0ff, 0 0 40px #0ff, 0 0 60px #0ff; }
}

.neon-animated {
  animation: neon-pulse 2s infinite;
}

---

컬러 그림자

브랜드 컬러 그림자

/* 파란색 그림자 */
.shadow-blue {
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

/* 보라색 그림자 */
.shadow-purple {
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

/* 그라디언트 느낌 다중 컬러 */
.shadow-gradient {
  box-shadow:
    -10px 0 30px rgba(255, 0, 128, 0.3),
    10px 0 30px rgba(0, 128, 255, 0.3);
}

호버 효과

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

---

실전 컴포넌트

카드 컴포넌트

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow:
    0 10px 15px -3px rgba(0,0,0,0.1),
    0 4px 6px -2px rgba(0,0,0,0.05);
}

버튼

.button {
  background: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(59,130,246,0.4);
  transition: all 0.2s;
}

.button:hover {
  box-shadow: 0 6px 20px rgba(59,130,246,0.5);
  transform: translateY(-2px);
}

.button:active {
  box-shadow: 0 2px 8px rgba(59,130,246,0.4);
  transform: translateY(0);
}

모달/팝업

.modal {
  background: white;
  border-radius: 16px;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.05);
}

/* 다크 모드 */
.modal-dark {
  background: #1f2937;
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.1);
}

입력 필드

.input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.2s;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

---

성능 최적화

will-change 사용

.animated-shadow {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

/* 애니메이션 후 제거 */
.animated-shadow:not(:hover) {
  will-change: auto;
}

대안: filter drop-shadow

/* 비정형 요소에 그림자 */
.drop-shadow {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* PNG 이미지에 적용 */
.icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

box-shadow vs filter

---

Tailwind CSS

<!-- 기본 그림자 -->
<div class="shadow-sm">작은 그림자</div>
<div class="shadow">기본 그림자</div>
<div class="shadow-md">중간 그림자</div>
<div class="shadow-lg">큰 그림자</div>
<div class="shadow-xl">더 큰 그림자</div>
<div class="shadow-2xl">가장 큰 그림자</div>

<!-- 컬러 그림자 -->
<div class="shadow-lg shadow-blue-500/50">파란 그림자</div>

<!-- 호버 -->
<div class="shadow hover:shadow-xl transition-shadow">호버 효과</div>

<!-- inset -->
<div class="shadow-inner">내부 그림자</div>

---

FAQ

Q1: 그림자가 잘리는 문제?

A: overflow: hidden이 부모에 있거나, 그림자가 영역 밖으로 나갈 공간이 없습니다.

/* 해결책 */
.parent {
  overflow: visible; /* 또는 제거 */
  padding: 20px; /* 그림자 공간 확보 */
}

Q2: 성능 문제가 있나요?

A: 많은 요소에 복잡한 box-shadow를 적용하면 성능 저하가 있을 수 있습니다.

• 다중 그림자 최소화
• will-change 적절히 사용
• 스크롤 시 그림자 단순화

Q3: 둥근 모서리에서 그림자가 이상해요

A: box-shadow는 자동으로 border-radius를 따릅니다. 문제가 있다면 브라우저 호환성을 확인하세요.

Q4: 그림자 색상 추천?

A:

• 라이트 모드: rgba(0,0,0,0.1) ~ rgba(0,0,0,0.2)
• 다크 모드: rgba(0,0,0,0.3) ~ rgba(0,0,0,0.5)
• 컬러 그림자: 배경색의 30-50% 불투명도

---

마무리

box-shadow 핵심:

1. 기본 문법: offset-x, offset-y, blur, spread, color
2. 다중 그림자: 쉼표로 레이어링
3. inset: 내부 그림자
4. 트렌드: 뉴모피즘, 글래스모피즘, 네온
5. 성능: will-change, 과도한 그림자 피하기

---

관련 도구