이 CSS 박스 그림자 생성기는 최대 8겹의 레이어 목록으로 box-shadow 값을 만듭니다. 레이어마다 가로·세로 오프셋, 블러 반경, 스프레드 반경, 알파가 있는 색, inset 스위치, 켜기·끄기 스위치가 있습니다. 입력하는 대로 미리보기 카드가 바뀌고, 복사 버튼을 누르면 모든 색이 rgba()로 적힌 box-shadow: ...;가 복사됩니다.
가장자리가 딱딱한 그림자 하나는 평면적으로 보입니다. 카드나 모달처럼 자연스럽게 느껴지는 인터페이스는 대개 좁고 진한 그림자와 넓고 옅은 그림자를 겹쳐 쓰고, 가장 매끄러운 결과는 오프셋과 블러가 단계마다 대략 두 배가 되는 옅은 레이어 네다섯 겹에서 나옵니다. 레이어 목록에서 이런 레이어를 추가·삭제·정렬할 수 있고, 부드러운 카드, 매끄러운 겹침, 하드 오프셋, 뉴모피즘, 글로우, 눌린 인셋 같은 흔한 조합이 예제로 준비되어 있습니다.
그림자를 손으로 옮길 수도 있습니다. 미리보기의 점은 선택한 레이어의 오프셋이 닿는 위치이며, 끌면 X와 Y 값이 새로 적힙니다. drop-shadow()나 text-shadow는 만들지 않습니다. 입력한 값은 브라우저에서 계산되며 업로드되지 않습니다.
사용 방법
예제를 고르거나 기본값으로 시작
기본값은 두 겹입니다. 상자 12px 아래의 부드러운 어두운 그림자와 그 밑에 깔린 더 좁은 푸른 그림자입니다. 예제는 목록 전체를 바꾸므로 출발점으로 쓰고 이어서 고치세요.
레이어를 선택해 숫자 입력
레이어를 누르면 편집됩니다. X·Y 오프셋은 -200에서 200픽셀(음수면 왼쪽·위쪽), 블러는 0에서 200, 스프레드는 -100에서 100입니다. 미리보기의 점을 끌면 X와 Y가 한꺼번에 바뀌고, 점에 포커스를 두고 방향키로도 움직일 수 있습니다.
색상과 알파 선택
16진수 색을 고르고 불투명도를 0에서 100퍼센트로 정합니다. 알파는 따로 저장되어
rgba()에 들어가며 소수 셋째 자리까지 유지됩니다.레이어 추가·정렬·끄기
레이어 추가로 그림자를 더하고, 화살표로 순서를 바꾸고(첫 레이어가 가장 위에 그려집니다), 스위치로 삭제 없이 레이어를 숨깁니다. 레이어는 새 자리로 부드럽게 움직입니다. 모든 레이어를 끄면 값이
none이 됩니다.필요하면 inset 전환 후 복사
inset 스위치는 레이어를 테두리 안쪽에 그립니다. 눌린 버튼이나 오목한 입력 필드에 어울립니다. 밝은·어두운·투명 배경에서 미리보기를 확인한 뒤
box-shadow: ...;한 줄을 복사하세요.
작동 원리
길이 네 개와 색 하나
문법은 W3C의 CSS Backgrounds and Borders Module Level 3에서 왔습니다. [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color> 형태입니다. 생성기는 0인 값도 생략하지 않고 길이 네 개를 항상 0px 12px 28px 0px rgba(23, 32, 29, 0.18)처럼 모두 적어서 숫자를 찾고 고치기 쉽게 했습니다.
블러 반경은 음수가 될 수 없습니다. 명세에 따르면 블러는 표준편차가 블러 반경의 절반인 가우시안 블러이므로, 블러 28px은 대략 28px에 걸쳐 옅어지며 가장자리가 딱딱한 그림자보다 가운데가 연하게 보입니다. 스프레드는 블러를 적용하기 전에 그림자 모양을 키우거나(양수) 줄이는(음수) 값이며, 상자보다 작은 그림자는 이렇게 만듭니다.
| 값 | 이 도구에서 허용 | 하는 일 |
|---|---|---|
| offset-x / offset-y | -200 ~ 200, px | 양수면 오른쪽·아래, 음수면 왼쪽·위로 이동 |
| blur | 0 ~ 200, px | 가장자리를 흐리게, 0이면 선명한 가장자리 |
| spread | -100 ~ 100, px | 블러 전에 그림자를 넓히거나 좁힘 |
| 색 + 투명도 | #rrggbb, 0~1 | rgba(r, g, b, a)로 기록, 알파는 소수 셋째 자리까지 |
| inset | 켜짐 / 꺼짐 | 상자 바깥 대신 안쪽에 그림 |
겹친 그림자가 더 현실적인 이유
실제 빛은 물체 가까이에서 어둡고 좁은 접촉 그림자와 멀리 퍼지는 확산 그림자를 함께 만듭니다. 블러 하나로는 둘을 모두 표현할 수 없습니다. 투명도 12%의 0 1px 3px처럼 작고 비교적 진한 레이어 아래에 투명도 18%의 0 12px 28px처럼 크고 옅은 레이어를 쌓으세요. 큰 레이어의 스프레드를 음수로 하면 카드 양옆으로 그림자가 삐져나오지 않습니다.
그림자를 여러 개 나열하면 첫 번째가 요소에 가장 가깝게 그려지고 이후 것은 이전 것 뒤에 놓입니다. 크고 부드러운 그림자를 먼저 쓰면 접촉 그림자를 가려 버리는 것이 흔한 실수이며, 레이어 목록의 위·아래 화살표가 바로 이를 고치기 위한 것입니다.
그림자는 레이아웃에 영향을 주지 않는다
box-shadow는 요소의 크기를 바꾸지 않으며, overflow: hidden인 조상 요소에서는 잘립니다. 요소의 border-radius도 따라가므로 모서리를 둥글게 하면 그림자도 둥글어집니다. 그림자는 상자 바깥에 그려지기 때문에 이웃 요소가 그 위에 겹칠 수 있습니다.
실제 예시
레이어 1: x 0, y 12, blur 28, spread 0, #17201d, 알파 0.18. 레이어 2: 0, 4, 10, -2, #1746d1, 0.12box-shadow: 0px 12px 28px 0px rgba(23, 32, 29, 0.18), 0px 4px 10px -2px rgba(23, 70, 209, 0.12);16진수 #1746d1은 rgb(23, 70, 209)로 변환됩니다.
알파 0.07의 검정 레이어 다섯 개: y 1 / blur 2, y 2 / 4, y 4 / 8, y 8 / 16, y 16 / 32box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07), 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 4px 8px 0px rgba(0, 0, 0, 0.07), 0px 8px 16px 0px rgba(0, 0, 0, 0.07), 0px 16px 32px 0px rgba(0, 0, 0, 0.07);레이어마다 오프셋과 블러를 두 배로 하면 눈에 띄는 경계 없이 고르게 옅어집니다.
x 0, y 2, blur 4, spread 0, #000000, 알파 0.25, inset 켬box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25);x 6, y 6, blur 0, spread 0, #000000, 알파 1box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);블러 0이면 상자 모양이 그대로 복제된 선명한 그림자가 됩니다.
x 0, y 1, blur 3, spread 0, #0A0A0A, 알파 0.123box-shadow: 0px 1px 3px 0px rgba(10, 10, 10, 0.123);알파를 소수 둘째 자리로 반올림하지 않으므로 옅은 레이어의 미세 조정이 그대로 남습니다.
자주 하는 실수
순수한 검정을 높은 투명도로 사용
rgba(0, 0, 0, 0.5)그림자는 색이 있는 배경 위에서 탁해 보입니다. 기본값 #17201d처럼 배경 색조를 어둡게 한 색을 10~25% 투명도로 쓰는 편이 낫습니다.목록이 길 때 큰 블러
큰 블러 반경은 그리는 비용이 크고 애니메이션하면 더 그렇습니다. 여덟 겹을 쌓으면 비용도 배로 늘어납니다. 호버 효과라면 블러 자체를 애니메이션하지 말고, 그림자를 가진 가상 요소의 opacity를 바꾸는 방식을 고려하세요.
overflow에 잘리는 그림자
부모에
overflow: hidden이 있거나 스크롤 컨테이너의 가장자리까지 그림자가 닿으면 잘립니다. 부모에 padding을 주거나 그림자를 래퍼로 옮기세요.크고 부드러운 레이어를 먼저 둠
첫 레이어가 나중 레이어 위에 그려집니다. 접촉 그림자가 사라졌다면 넓은 레이어가 그 위에 있을 가능성이 크니 화살표 버튼으로 아래로 내리세요.
16진수에 투명도를 넣으려 함
색 입력란은
#rgb와#rrggbb만 받습니다. 투명도는 불투명도 슬라이더에서 정하며rgba()로 기록됩니다.#17201d2e같은 8자리 16진수는 여기에 입력할 수 없습니다.
자주 묻는 질문
box-shadow의 숫자 네 개는 각각 무슨 뜻인가요?
순서대로 가로 오프셋, 세로 오프셋, 블러 반경, 스프레드 반경이고 그 뒤에 색이 옵니다. 오프셋은 그림자를 옮기고, 블러는 가장자리를 흐리게 하며, 스프레드는 블러 전에 그림자를 키우거나 줄입니다.
블러와 스프레드는 어떻게 다른가요?
블러는 그림자 가장자리를 일정 거리에 걸쳐 흐리게 하고, 스프레드는 그림자 모양 자체의 크기를 바꿉니다. 블러 20에 스프레드 -10이면 가장자리 근처는 보이지 않지만 상자 아래쪽에는 은은하게 번집니다.
아래쪽에만 그림자를 주려면?
Y 오프셋을 양수로, 스프레드를 음수로 주세요. 예를 들어 y 10, blur 15, spread -8이면 음수 스프레드가 그림자 양옆을 안쪽으로 당겨 아래쪽 가장자리만 보입니다.
레이어는 몇 개까지 쓸 수 있나요?
최대 8개입니다. CSS 자체에는 제한이 없지만 다섯, 여섯 겹을 넘기면 모양이 거의 나아지지 않고 그리는 비용만 늘어나서 여덟 겹에서 멈추게 했습니다.
색이 rgba로 적히는 이유는 무엇인가요?
생성기가 16진수 색과 별도의 알파 값을 rgba()로 변환하기 때문입니다. 모든 브라우저와 오래된 도구가 이해하는 형식이며, 일부 도구가 잘 처리하지 못하는 8자리 16진수를 피하는 선택이기도 합니다.
inset은 무슨 역할을 하나요?
inset은 그림자를 테두리 안쪽, 배경 위이면서 내용 아래에 그립니다. 눌린 상태, 텍스트 필드, 안쪽 글로우에 유용합니다.
box-shadow와 filter: drop-shadow는 어떻게 다른가요?
box-shadow는 사각형 상자(와 border-radius)를 따르고, drop-shadow()는 투명 PNG를 포함해 실제로 보이는 픽셀의 윤곽을 따릅니다. 불규칙한 모양에는 drop-shadow를 쓰세요.
마지막 업데이트: