CSS 박스섀도 생성기

box-shadow 값을 시각적으로 조절해 CSS 코드를 만듭니다.

수평(X) 0px 수직(Y) 8px 흐림(blur) 24px 확산(spread) 0px

그림자색 불투명도 25% 안쪽(inset)

카드에 그림자를 넣으려고 box-shadow: 0 4px 6px rgba(0,0,0,.1)을 적었다가, 저장하고 새로고침하고 숫자를 조금 고치기를 몇 번씩 반복하게 되는 경우가 있습니다.

이 도구는 슬라이더를 움직이는 즉시 미리보기 상자에 그림자가 반영되고, 그에 맞는 CSS 코드가 아래에서 완성됩니다. 마음에 드는 모양이 나오면 복사해서 붙여 넣으면 됩니다.

어떻게 계산되나요

각 항목이 하는 일

항목	범위	설명
수평(X)	-50 ~ 50px	양수면 오른쪽, 음수면 왼쪽으로 그림자가 이동
수직(Y)	-50 ~ 50px	양수면 아래, 음수면 위로 이동
흐림(blur)	0 ~ 100px	클수록 경계가 부드럽게 번짐. 0이면 또렷한 도형
확산(spread)	-50 ~ 50px	양수면 그림자가 커지고, 음수면 줄어듦
불투명도	0 ~ 100%	그림자색의 알파값

안쪽(inset)에 체크하면 그림자가 바깥이 아니라 요소 안쪽으로 들어갑니다. 입력창을 눌린 것처럼 보이게 하거나 홈이 파인 느낌을 줄 때 씁니다.

만들어지는 코드

값들은 다음 순서로 조합됩니다.

box-shadow: [inset] X Y blur spread color;

색상은 고른 HEX와 불투명도를 합쳐 rgba() 형태로 출력됩니다. 예를 들어 #1a56db에 불투명도 25%를 주면 rgba(26,86,219,0.25)가 됩니다. 복사 버튼을 누르면 box-shadow: 선언 전체가 클립보드에 담깁니다.

자연스럽게 보이는 요령

빛이 위에서 내려온다고 가정하면 자연스러워 보이기 때문에, X는 0에 두고 Y만 양수로 주는 조합이 무난합니다. 검정(#000)에 낮은 불투명도를 주면 어떤 배경에서도 무난하지만, 배경색보다 조금 어두운 같은 색조를 쓰면 더 부드럽게 어우러집니다.

브라우저는 box-shadow 값을 쉼표로 구분해 여러 겹 쌓을 수 있습니다. 이 도구는 한 겹만 만들지만, 만들어진 코드를 쉼표로 이어 붙이면 옅고 넓은 그림자 위에 짙고 좁은 그림자를 겹치는 식으로 깊이를 표현할 수 있습니다. 그림자를 크고 진하게 여러 개 쓰면 스크롤 성능에 영향을 줄 수 있으니 필요한 만큼만 쓰는 편이 좋습니다.

용어 정리

box-shadow: 요소 바깥이나 안쪽에 그림자를 그리는 CSS 속성.
흐림(blur): 그림자 경계가 번지는 정도. 0이면 경계가 또렷한 도형처럼 보입니다.
확산(spread): 그림자 자체의 크기를 키우거나 줄이는 값. 흐림과 달리 경계 선명도는 그대로입니다.
inset: 바깥이 아니라 요소 안쪽에 그림자를 그리게 하는 키워드.
rgba: 빨강·초록·파랑에 투명도(알파)를 더한 색상 표기. 알파는 0(투명)~1(불투명)입니다.
알파(불투명도): 색이 얼마나 불투명한지를 나타내는 값.

자주 묻는 질문

blur와 spread는 뭐가 다른가요?

blur는 그림자의 경계를 번지게 해 부드럽게 만들고, spread는 그림자 도형 자체를 키우거나 줄입니다. blur만 올리면 흐릿하게 퍼지고, spread만 올리면 또렷한 채로 커집니다. 두 값을 조합하면 원하는 두께와 부드러움을 따로 조절할 수 있습니다.

그림자를 두 겹 이상 넣으려면?

이 도구가 만든 코드에 쉼표로 이어 붙이면 됩니다. 예를 들어 `box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);`처럼 옅고 넓은 그림자와 짙고 좁은 그림자를 겹치면 더 자연스러운 깊이가 납니다. 앞에 쓴 그림자가 위에 그려집니다.

그림자가 잘려서 보입니다

부모 요소에 `overflow: hidden`이 걸려 있으면 바깥으로 나가는 그림자가 잘립니다. 또한 요소가 `position: static`이고 뒤 요소와 겹칠 때 가려지기도 합니다. 이럴 때는 부모의 overflow를 확인하거나 `position: relative`와 `z-index`를 조정해 보세요.

text-shadow에도 같은 값을 쓸 수 있나요?

비슷하지만 다릅니다. `text-shadow`에는 확산(spread) 값이 없어 `X Y blur color` 네 가지만 씁니다. 이 도구에서 만든 값 중 spread를 빼고 옮기면 되고, 글자 그림자는 값이 크면 가독성을 해치니 보통 1~2px 정도로 짧게 씁니다.

안쪽(inset) 그림자는 언제 쓰나요?

입력창이나 토글 버튼이 눌린 상태를 표현하거나, 영역이 살짝 파여 보이게 할 때 씁니다. 이때는 Y를 작은 양수로, blur를 낮게 잡으면 자연스럽습니다.