CSS 그림자(box-shadow) 생성기

한 겹짜리 그림자가 가짜처럼 보이는 이유

실제 세계에서 물체 하나에는 그림자가 한 종류만 생기지 않습니다. 물체와 바닥이 닿는 부분에는 진하고 좁은 그림자가, 멀어질수록 옅고 넓게 퍼진 그림자가 동시에 생깁니다. 광원이 점이 아니라 면적을 갖기 때문입니다.

box-shadow를 한 줄만 쓰면 이 중 하나만 표현됩니다. 그래서 blur를 아무리 조절해도 어딘가 도장 찍은 것처럼 보입니다. 해법은 성격이 다른 그림자를 여러 겹 쌓는 것입니다.

투명도는 생각보다 훨씬 낮아야 합니다

초보자가 만든 그림자가 어색한 가장 흔한 이유는 진하기입니다. 검정 30~50%를 주면 그림자가 아니라 검은 얼룩이 됩니다. 흰 배경에서 자연스러운 그림자는 대개 검정 8~15% 수준입니다. 이 도구의 기본값이 12%인 것도 그 때문입니다.

또 하나. 그림자 색을 순수한 검정(#000000)으로 두면 회색빛이 돌아 화면이 탁해집니다. 배경색 계열의 어두운 색(예: 남색빛 #0f172a)을 쓰면 훨씬 세련돼 보입니다. UI 디자인 시스템들이 그림자에 순수 검정을 잘 안 쓰는 이유입니다.

• 카드 그림자 — 투명도 8~14%, blur 크게, spread는 0 또는 음수.
• spread를 음수로 주면 그림자가 요소보다 작아져 아래로만 살짝 깔립니다. 훨씬 고급스럽습니다.
• y는 항상 양수로. 빛은 위에서 옵니다. y가 음수인 그림자는 뭔가 잘못된 느낌을 줍니다.
• x는 0이 기본입니다. 좌우로 밀린 그림자는 옆에서 조명을 비춘 특수한 경우에만 씁니다.

다크 모드에서 그림자가 사라지는 문제

검은 배경 위의 검은 그림자는 보이지 않습니다. 당연한 얘기지만, 라이트 모드에서 공들여 만든 그림자를 그대로 다크 모드에 넘기면 카드가 배경에 붙어 버려 깊이가 완전히 사라집니다. 투명도를 40%까지 올려도 별 소용이 없습니다 — 검정 위의 더 진한 검정은 그냥 검정입니다.

다크 모드에서는 그림자로 깊이를 표현하는 방식 자체를 바꿔야 합니다. 실제 다크 UI들이 쓰는 방법은 세 가지입니다.

• 표면을 밝게 — 떠 있는 요소일수록 배경보다 밝게 만듭니다. 머티리얼 다크 테마의 공식 방식입니다. 그림자 대신 밝기로 높이를 표현합니다.
• 테두리 링 — "테두리 링" 프리셋처럼 spread만 1~2px 주고 x·y·blur를 0으로 두면 얇은 윤곽선이 생겨 경계가 살아납니다. 밝은 색을 낮은 투명도로 쓰세요.
• 위쪽 하이라이트 — inset으로 위쪽에 밝은 선을 넣으면 빛을 받는 모서리처럼 보입니다.

/* 라이트 — 그림자로 깊이 */
.card {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 4px 8px -2px rgba(15,23,42,.08),
              0 12px 24px -6px rgba(15,23,42,.10);
}

/* 다크 — 밝기 + 얇은 링으로 깊이 */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1e293b;              /* 배경(#0f172a)보다 밝게 */
    box-shadow: 0 0 0 1px rgba(255,255,255,.06),
                0 12px 24px -6px rgba(0,0,0,.5);
  }
}

성능 — 그림자는 공짜가 아닙니다

blur가 큰 box-shadow는 브라우저가 다시 그릴 때마다 계산해야 하는 비싼 효과입니다. 평소에는 티가 안 나지만 두 가지 상황에서 문제가 됩니다.

• 목록에 그림자 카드가 수십 개 — 스크롤이 끊깁니다. 특히 저사양 기기에서 두드러집니다.
• hover에서 box-shadow를 transition — 그림자 값이 바뀔 때마다 다시 계산됩니다. 아래처럼 미리 깔아 두고 투명도만 바꾸면 훨씬 부드럽습니다.

/* 느림 — 매 프레임 그림자 재계산 */
.card { transition: box-shadow .2s; }
.card:hover { box-shadow: 0 20px 40px -12px rgba(30,41,59,.22); }

/* 빠름 — 그림자를 미리 깔고 투명도만 바꾼다 */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 20px 40px -12px rgba(30,41,59,.22);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

text-shadow는 규칙이 다릅니다

모드를 text-shadow로 바꾸면 spread와 inset 조절칸이 사라집니다. text-shadow에는 그 두 값이 아예 없기 때문입니다. 값은 x, y, blur, 색 네 개뿐입니다.

글자 그림자에서 가장 실용적인 쓰임은 멋 내기가 아니라 사진 위 글자 가독성입니다. 사진 위 흰 글자에 검정 그림자를 아주 옅게(투명도 30~40%, blur 4px 정도) 깔면 배경이 밝든 어둡든 글자가 읽힙니다.

• "글자 외곽선" 프리셋은 사방 네 방향에 blur 0짜리 그림자를 두는 방식입니다. 배경이 복잡할 때 확실하지만 글자가 두꺼워 보입니다. 대안으로 -webkit-text-stroke 가 있습니다.
• "글자 입체(3D)" 프리셋은 1px씩 밀린 그림자를 여러 겹 쌓아 두께를 만듭니다. 색을 점점 어둡게 두는 게 요령입니다.
• 본문 텍스트에는 그림자를 쓰지 마세요. 작은 글자에 그림자를 넣으면 획이 뭉개져 오히려 읽기 어려워집니다. 큰 제목에만 쓰는 것이 원칙입니다.