CSS 박스 섀도우 생성기 (box-shadow)

오프셋, 블러, 스프레드, 색상, 불투명도를 슬라이더로 조정해 실시간 미리보기와 함께 CSS box-shadow를 생성하는 무료 도구입니다. 생성된 코드는 클릭 한 번으로 복사할 수 있습니다.

마지막 업데이트: 2026-09-20

box-shadow란

`box-shadow`는 요소에 그림자를 드리우는 CSS 속성입니다. 값은 「수평 방향 오프셋·수직 방향 오프셋·흐림 반지름·확산 반지름·색」 순으로 늘어놓아 쓰지만, **숫자가 네 개나 이어지는 데다 흐림과 확산의 차이는 글자만으로는 잡기 어렵기** 때문에 손으로 써서 확인하기가 번거로운 속성이기도 합니다. 이 도구는 슬라이더로 각 값을 움직이면서 결과를 그 자리에서 미리 볼 수 있게 합니다.

그림자의 인상을 좌우하는 것은 수치의 크기보다 조합입니다. **자연스러워 보이는 그림자는 오프셋을 작게·흐림을 크게·불투명도를 낮게** 한 것이 많고, 반대로 오프셋을 크게 잡고 불투명도를 올리면 오려 붙인 듯한 딱딱한 인상이 됩니다. `inset`을 지정하면 그림자가 요소 안쪽에 떨어져 움푹 팬 듯한 표현이 됩니다. 생성된 코드는 클릭 한 번으로 복사할 수 있고, 처리는 모두 브라우저 안에서 완결됩니다.

그림자를 만드는 순서

오프셋을 정합니다 광원의 방향을 정하는 조작입니다. 대개는 X를 0, Y를 조금만 양수로 두면 자연스러워집니다.
흐림 반지름을 조정합니다 그림자 윤곽의 부드러움입니다. 값을 키우면 넓고 옅게 퍼집니다.
확산 반지름을 조정합니다 그림자 자체를 살찌우거나 여위게 하는 값입니다. **흐림과 달리 윤곽의 단단함은 바뀌지 않습니다.**
색과 불투명도를 고릅니다 반투명한 검정이 무난하지만, 배경색에 가까운 짙은 색을 옅게 올리면 더 잘 어우러집니다.
코드를 복사합니다 생성된 `box-shadow` 값을 그대로 스타일시트에 붙여 넣을 수 있습니다.

더 잘 활용하기 위한 팁

슬라이더를 드래그하는 대신 입력란에 정확한 숫자를 직접 입력해 세밀하게 조정할 수도 있습니다.
"inset"을 켜면 그림자가 요소 안쪽에 그려져 튀어나온 느낌 대신 움푹 들어간 듯한 입체감을 표현할 수 있습니다.
spread(스프레드 반경)를 키우면 그림자 윤곽 전체가 커지고, blur(블러 반경)를 키우면 가장자리가 부드럽고 흐릿해집니다. 두 값을 조합하면 다양한 질감을 낼 수 있습니다.
불투명도를 낮출수록 그림자가 더 가볍고 자연스러워지며, 색이 있는 배경 위에 요소가 겹칠 때 특히 유용합니다.
생성된 CSS는 그대로 스타일시트에 붙여넣어 사용할 수 있으며, 버튼이나 카드의 호버 효과와 함께 사용하면 특히 잘 어울립니다.

이럴 때 쓸 수 있습니다

카드나 버튼에 입체감을 줄 때

아주 약간의 그림자만 있어도 클릭할 수 있는 요소임을 전하기 쉬워집니다.

모달이나 드롭다운을 띄울 때

뒤쪽 콘텐츠와의 겹침을 그림자의 세기로 표현할 수 있습니다.

디자인 시안의 그림자를 재현할 때

디자인 도구의 그림자 설정을 CSS로 옮길 때 견주어 보며 값을 맞출 수 있습니다.

움푹 팬 표현을 만들 때

`inset`을 쓰면 입력란이 가라앉아 보이는 처리도 시험해 볼 수 있습니다.

box-shadow 용어

오프셋: 그림자를 어긋나게 하는 거리입니다. 첫 번째가 수평 방향(X), 두 번째가 수직 방향(Y)이며 양수로 오른쪽·아래로 어긋납니다.
흐림 반지름(blur): 그림자의 윤곽을 흐리는 양입니다. **0으로 하면 윤곽이 또렷한 그림자가 됩니다.**
확산 반지름(spread): 그림자의 크기를 넓히는 양입니다. 음수로 하면 그림자가 줄어듭니다.
inset: 그림자를 요소 안쪽에 드리우는 키워드입니다. 움푹 팬 듯한 표현이 됩니다.
불투명도: 그림자의 짙기입니다. `rgba()`의 알파 값으로 지정합니다. **너무 짙은 그림자는 무거워 보입니다.**
여러 겹의 그림자: 쉼표로 구분해 여러 그림자를 겹칠 수 있습니다. 가까운 짙은 그림자와 먼 옅은 그림자를 겹치면 자연스러워집니다.

자주 묻는 질문

blur(블러 반경)는 그림자 가장자리가 얼마나 부드럽게 보이는지를 결정하며, 값이 클수록 번짐이 더 넓은 영역에 퍼집니다. 반면 spread(스프레드 반경)는 그림자 자체의 크기를 바꾸는 값으로, 양수 값은 요소보다 그림자를 더 크게 만들고 음수 값은 더 작게 줄입니다. 두 값을 함께 조정하면 그림자의 질감을 세밀하게 제어할 수 있습니다.

inset 키워드는 그림자를 요소의 바깥이 아니라 테두리 안쪽에 그립니다. 일반적인 box-shadow가 요소를 페이지 위에 떠 있는 것처럼 보이게 하는 반면, inset은 요소가 움푹 들어가거나 파묻힌 것처럼 보이게 하며 입력 폼 테두리를 꾸밀 때 자주 사용됩니다.

CSS의 box-shadow 속성은 쉼표로 구분된 여러 그림자 값을 받을 수 있어, 여러 겹을 쌓아 더 입체적인 느낌을 낼 수 있습니다. 이 도구는 사용의 편의성을 위해 단일 그림자 생성에 집중하고 있으며, 여러 겹이 필요하다면 생성된 CSS에 쉼표로 구분된 값을 직접 추가하면 됩니다.

box-shadow는 Internet Explorer 9 이상을 포함한 대부분의 최신 브라우저에서 지원하는 표준 CSS 속성입니다. 과거에는 -webkit-, -moz- 같은 벤더 접두사가 필요했지만, 지금은 접두사 없이 그대로 사용할 수 있습니다.

완전히 불투명한 검정색(불투명도 100%)으로 그림자를 만들면 배경색에 따라 그림자가 붕 떠 보이거나 지나치게 강해 보일 수 있습니다. 불투명도를 낮춰 반투명한 검정이나 회색을 사용하면 어떤 배경 위에서도 자연스럽게 어우러지는 부드러운 그림자를 표현할 수 있습니다.

여담 ― box-shadow가 바꾼 웹 디자인의 표현력

CSS3에서 box-shadow가 표준화되기 전, 웹에서 그림자를 표현하려면 이미지 편집 프로그램으로 그림자를 미리 그려 넣은 배경 이미지를 사용하거나, 그라데이션 배경을 가진 여러 개의 div 요소를 겹쳐서 그림자처럼 보이게 만드는 방법이 주로 쓰였습니다. 그림자의 모양이나 부드러움을 조금만 바꾸려 해도 이미지를 다시 만들어야 했기에, 디자인을 반복해서 다듬는 작업에는 많은 시간과 비용이 들었습니다.

2009년경부터 브라우저들이 CSS3의 일부로 box-shadow를 구현하기 시작하면서, 그림자는 단 한 줄의 CSS 선언만으로 만들 수 있게 되었습니다. 별도의 이미지 자원이 필요 없어져 페이지 로딩이 가벼워졌고, 화면 크기가 반응형으로 바뀌어도 그림자의 모양이 흐트러지지 않는다는 장점도 생겼습니다.

2014년 구글이 발표한 머티리얼 디자인(Material Design)은 box-shadow를 응용해 "elevation(높이)"이라는 개념을 도입했습니다. 각 요소에 Z축 상의 높이를 부여하고, 높이가 높은 요소일수록 더 크고 짙은 그림자를 드리우게 함으로써, 평면적인 화면 안에 입체적인 계층 구조를 표현하는 방식입니다. 이는 오늘날에도 많은 디자인 시스템에 영향을 주고 있습니다.

모든 여담 보기