CSS Box Shadow 생성기

슬라이더로 box-shadow를 시각적으로 조정. 다중 레이어, inset 전환, 실시간 미리보기, 원클릭 CSS 복사.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

그림자 레이어

미리보기

배경 요소 둥근모서리 12px

CSS

프리셋

📖 자주 걸리는 지점

슬라이더로 box-shadow 를 조립하고 여러 레이어를 겹쳐 CSS 를 내보냅니다. 처리는 모두 브라우저 안에서 끝납니다. 미리보기는 지금 쓰고 있는 브라우저의 렌더링 그 자체이므로 다른 브라우저나 OS 에서는 블러의 계조가 조금 다르게 보일 수 있습니다. 픽셀 단위로 엄밀히 맞춰야 한다면 실기기에서 확인하세요.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
blur 와 spread 를 혼동	blur 는 흐림의 폭, spread 는 그림자 자체의 확대 축소입니다. spread 를 올리면 그림자가 요소보다 커지고 윤곽이 선명한 채 밖으로 퍼져 의도보다 무거워 보입니다.	자연스러운 그림자는 blur 를 크게, spread 는 오히려 음수로 하면 얻어집니다. `0 4px 12px -2px rgba(0,0,0,.15)` 처럼 살짝 안으로 줄인 뒤 흐리면 요소 바로 아래에서 부드럽게 올라옵니다.
그림자 붙은 요소를 움직이면 무겁다	`box-shadow` 값 자체를 트랜지션하면 흐림을 프레임마다 다시 그리게 됩니다. 카드 목록의 호버처럼 여러 장이 동시에 움직이는 장면에서는 이것만으로도 눈에 띄게 무거워집니다.	그림자를 `::after` 가상 요소에 두고 `opacity` 만 트랜지션합니다. opacity 와 transform 은 합성 레이어에서 처리되어 레이아웃도 리페인트도 일어나지 않습니다. `will-change` 는 레이어를 늘려 메모리를 먹으므로 실제로 문제가 난 요소에만 붙이세요.
그림자만 붕 떠 보인다	검정 한 장을 진하게 깐 그림자는 현실의 그림자와 다르게 보입니다. 실제 그림자는 광원에서 멀수록 넓고 옅어지며 주변 색을 조금 머금습니다. 단색 · 단층이면 요소가 배경에서 오려 붙인 것처럼 보입니다.	옅은 그림자를 2~3장 겹칩니다. 가깝고 작고 약간 진한 것(`0 1px 2px rgba(0,0,0,.10)`)과 멀고 크고 옅은 것(`0 8px 24px rgba(0,0,0,.08)`)의 조합이 정석입니다. 색은 새까맣게가 아니라 배경 색상을 조금 섞으면 어우러집니다. Material Design 도 Apple HIG 도 이 방식을 씁니다.

box-shadow 는 요소 박스(둥근 모서리 포함)의 형태로만 그림자를 드리웁니다. 투명 PNG 로고나 SVG 아이콘에 그림자를 넣으면 사각형 그림자가 나오므로 filter: drop-shadow() 를 쓰세요. 이쪽은 알파 채널의 형태를 따릅니다. 다만 drop-shadow 는 spread 가 없고 여러 개를 지정하면 필터가 연쇄되어 부하가 커지므로 용도에 따라 나눠 쓰는 것이 현실적입니다.

📖 사용법

1

슬라이더로 그림자 조정

X / Y / blur / spread / 색상 / 투명도를 직관적으로
2

레이어 추가

"+ 추가" 클릭으로 여러 레이어. CSS는 자동 콤마 구분
3

CSS 복사

생성된 box-shadow를 원클릭 복사

❓ 자주 묻는 질문

어디에 붙여넣나요?

CSS 셀렉터 내부에. 예: .card { box-shadow: ... }

inset 이란？

요소 안쪽에 그림자를 그림. 눌린 버튼 같은 효과

여러 그림자를 결합하는 이유？

부드러운 가까운 그림자와 긴 먼 그림자를 겹치면 입체감 (Material Design / Apple HIG 활용)

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.