CSS 박스 섀도우 생성기 (box-shadow)
오프셋, 블러, 스프레드, 색상, 불투명도를 슬라이더로 조정해 실시간 미리보기와 함께 CSS box-shadow를 생성하는 무료 도구입니다. 생성된 코드는 클릭 한 번으로 복사할 수 있습니다.
사용 팁
- 슬라이더를 드래그하는 대신 입력란에 정확한 숫자를 직접 입력해 세밀하게 조정할 수도 있습니다.
- "inset"을 켜면 그림자가 요소 안쪽에 그려져 튀어나온 느낌 대신 움푹 들어간 듯한 입체감을 표현할 수 있습니다.
- spread(스프레드 반경)를 키우면 그림자 윤곽 전체가 커지고, blur(블러 반경)를 키우면 가장자리가 부드럽고 흐릿해집니다. 두 값을 조합하면 다양한 질감을 낼 수 있습니다.
- 불투명도를 낮출수록 그림자가 더 가볍고 자연스러워지며, 색이 있는 배경 위에 요소가 겹칠 때 특히 유용합니다.
- 생성된 CSS는 그대로 스타일시트에 붙여넣어 사용할 수 있으며, 버튼이나 카드의 호버 효과와 함께 사용하면 특히 잘 어울립니다.
자주 묻는 질문
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축 상의 높이를 부여하고, 높이가 높은 요소일수록 더 크고 짙은 그림자를 드리우게 함으로써, 평면적인 화면 안에 입체적인 계층 구조를 표현하는 방식입니다. 이는 오늘날에도 많은 디자인 시스템에 영향을 주고 있습니다.