SHDCSS 박스 쉐도우 생성기

CSS box-shadow 완벽 가이드

CSS box-shadow는 요소에 그림자를 추가해 깊이감과 입체감을 부여하는 속성입니다. Material Design, 뉴모피즘, 글래스모피즘 등 모든 현대 UI 디자인 시스템에서 핵심적으로 사용됩니다. 이 도구는 슬라이더를 조작하는 즉시 그림자가 어떻게 변하는지 실시간으로 확인하고 CSS 코드를 바로 복사할 수 있게 해줍니다.

box-shadow vs text-shadow

box-shadow — 요소 박스 그림자

요소의 박스 영역 전체에 그림자를 적용합니다. inset 키워드와 spread 값을 지원하는 것이 text-shadow와의 큰 차이입니다.

/* 기본 그림자 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* 외부 그림자 + 내부 그림자 동시에 */
box-shadow:
  0 4px 6px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.1);

text-shadow — 텍스트 그림자

/* 기본: x y blur color */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

/* 빛나는(glow) 효과 */
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #667eea;

/* 레트로 3D 효과 */
text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa;

6개 값 완벽 이해

각 값의 역할

box-shadow: inset  x     y     blur   spread  color;
            (선택) 5px   5px   15px   0px     rgba(0,0,0,0.25);

/* inset  : 내부 그림자 (없으면 외부) */
/* x      : 양수=오른쪽, 음수=왼쪽 */
/* y      : 양수=아래, 음수=위 */
/* blur   : 흐림 반지름 (0=선명, 클수록 부드러움) */
/* spread : 양수=확장, 음수=축소 */
/* color  : rgba/hex 모두 가능 (투명도 권장) */

Material Design 그림자 값

Material Design 공식 elevation 값

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

/* elevation 2 (버튼) */
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

/* elevation 3 (모달) */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

/* elevation 4 (드로어) */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

/* elevation 5 (다이얼로그) */
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

다중 그림자 기법 — 뉴모피즘

뉴모피즘 (Neumorphism)

/* 배경색과 일치해야 함 */
.neumorph {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px #b8bec7,   /* 어두운 그림자 (오른쪽 아래) */
    -6px -6px 12px #ffffff; /* 밝은 그림자 (왼쪽 위) */
  border-radius: 12px;
}

/* 눌린(pressed) 상태 */
.neumorph:active {
  box-shadow:
    inset 4px 4px 8px #b8bec7,
    inset -4px -4px 8px #ffffff;
}

컬러 그림자 (Color Shadow)

/* 버튼의 색상 그림자 */
.btn-primary {
  background: #667eea;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-danger {
  background: #f5576c;
  box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}

성능 및 접근성

성능 최적화

box-shadow는 GPU 가속을 받지 않아 애니메이션에서 paint를 유발합니다. 호버 효과에 box-shadow를 변경하는 대신 opacity를 사용하거나, 실제 그림자 요소를 ::after 의사 요소로 만들고 opacity를 전환하면 60fps를 유지할 수 있습니다.

/* 성능 최적화 패턴 */
.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::after {
  opacity: 1; /* box-shadow 대신 opacity만 변경 */
}

자주 묻는 질문 (FAQ)

그림자 없이 외곽선만 만들 수 있나요?

spread만 사용하면 됩니다. box-shadow: 0 0 0 2px #667eea는 blur 없는 2px 테두리처럼 보입니다. outline과 달리 레이아웃에 영향을 주지 않고 border-radius를 따라갑니다.

filter: drop-shadow()와 box-shadow의 차이는?

filter: drop-shadow()는 투명 PNG의 실제 모양을 따라 그림자를 만듭니다. box-shadow는 항상 직사각형 박스 기준입니다. SVG나 투명 이미지에는 drop-shadow가 더 자연스럽습니다.

Tailwind CSS에서 box-shadow 사용하기

<div class="shadow-sm">   <!-- 작은 그림자 -->
<div class="shadow">      <!-- 기본 그림자 -->
<div class="shadow-md">   <!-- 중간 그림자 -->
<div class="shadow-lg">   <!-- 큰 그림자 -->
<div class="shadow-xl">   <!-- 더 큰 그림자 -->
<div class="shadow-2xl">  <!-- 가장 큰 그림자 -->
<div class="shadow-inner"> <!-- 내부 그림자 -->
<div class="shadow-none"> <!-- 그림자 제거 -->

접근성 측면에서 주의사항은?

그림자만으로 포커스 표시를 대체하지 마세요. 고대비 모드에서는 그림자가 보이지 않을 수 있습니다. 포커스 링에는 outline을 유지하고 그림자는 시각적 보강으로만 사용하세요.