접지 + 환경 두 겹의 은은한 카드
2 레이어 은은한 카드
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);짧고 단단한 그림자가 접지점을, 길고 부드러운 그림자가 환경광 반사를 표현합니다. 대부분 모던 디자인 시스템이 쓰는 패턴입니다.
CSS Box Shadow 생성기
다중 레이어 CSS box-shadow를 실시간 미리보기로 디자인하고 실서비스용 CSS를 복사.
마지막 업데이트
미리보기
그림자 레이어
CSS
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);CSS box-shadow 생성기란?
box-shadow 는 어떤 요소에든 드롭 섀도, 글로우, 안쪽으로 파인 우물 효과를 더해 주는 CSS 속성입니다. 평면 디자인에 *입체감* 을 부여하는 가장 큰 레버죠 - 카드는 페이지 위로 떠 오르고, 모달은 콘텐츠 위에 떠 있으며, 버튼은 "눌릴 것 같은" 느낌을 줍니다.
비밀은 *좋은* 그림자는 보통 한 겹이 아니라는 점입니다. 실제 그림자는 더 부드럽고 환경광을 머금고 있어서, 대부분의 디자인 시스템(Material, iOS, Tailwind)이 오프셋과 불투명도를 달리한 box-shadow 선언 2~3개를 쌓습니다. 손으로 쓰면 번거롭지만, 생성기를 쓰면 각 레이어를 시각적으로 조정하면서 합쳐진 결과를 실시간으로 확인할 수 있습니다.
Coddy 생성기는 무제한 레이어, *외곽* 과 *inset* 양쪽 그림자, 레이어별 색상/불투명도, 그리고 자주 쓰는 패턴 프리셋(은은한 카드, 또렷한 드롭, 브랜드 글로우, inset 우물, 뉴모피즘 표면)을 지원합니다. CSS를 복사해서 스타일시트에 그대로 붙여 넣으세요 - 업로드, 계정, 워터마크 없이.
box-shadow에서 알아두면 좋은 점
- 문법은
box-shadow: [inset] <x> <y> <blur> <spread> <color>입니다.inset을 붙이면 그림자가 요소 *안쪽*, 없으면 *바깥쪽* 에 떨어집니다. - *Blur* 는 가장자리를 부드럽게 만들고, 값이 클수록 더 흩뿌려진 그림자가 됩니다. *Spread* 는 blur 전에 그림자를 두껍게/얇게 만듭니다(음수면 안쪽으로 줄어들어 부드러운 내부 리프트에 유용).
- 여러 그림자는 콤마로 구분되며 작성된 순서대로 뒤→앞으로 쌓입니다. 먼저 쓴 그림자가 합성 결과에서 *맨 아래* 에 위치합니다.
box-shadow 만드는 단계
프리셋으로 시작
원하는 느낌에 가까운 프리셋을 선택하세요 - 은은한 카드, 부드러운 들뜸, 또렷한 드롭, 브랜드 글로우, inset 우물, 뉴모피즘. 그 위에서 다듬으면 됩니다.
활성 레이어 조정
X/Y, blur, spread, 색상, 불투명도 슬라이더를 움직이세요. 왼쪽 미리보기가 실시간으로 갱신됩니다. 불투명도를 낮추고 blur를 키울수록 그림자는 *부드럽게* 보입니다.
레이어 더 쌓기
*레이어 추가* 로 두 번째 그림자를 쌓습니다. 진짜 같은 깊이는 거의 항상 두 겹입니다 - 짧고 단단한 접지 그림자와, 길고 부드러운 환경 그림자.
안쪽 우물엔 inset
*Inset* 을 켜면 그림자가 요소 안쪽에 그려집니다. 은은한 외곽 그림자와 결합하면 "눌린 버튼" 같은 효과가 됩니다.
CSS 복사
미리보기가 디자인과 맞으면 *CSS 복사* 를 누르세요. 생성된 규칙에는 활성 레이어가 모두 포함됩니다 - 그대로 스타일시트에 붙여 넣으면 됩니다.
box-shadow 빠른 참고
box-shadow: x y blur spread color 의 각 값과 역할.
| 값 | 효과 | 일반 범위 |
|---|---|---|
| X 오프셋 | 수평 이동량, 양수면 오른쪽 | −40px ~ 40px |
| Y 오프셋 | 수직 이동량, 양수면 아래쪽 | 자연광이면 0px ~ 40px |
| Blur | 가장자리를 흐리게 | 0px ~ 80px |
| Spread | blur 적용 전 두께 조절 | −30px ~ 30px |
| 색상 | 어떤 CSS 색상도 가능; rgba() 로 레이어별 불투명도 조정 | 자연 그림자는 rgba(0,0,0,0.05–0.3) 정도 |
inset | 그림자를 요소 안쪽에 그림 | - |
| 여러 레이어 | 콤마 구분; 뒤→앞 순서로 쌓임 | 2~3개면 진짜 같은 입체감 |
써볼 만한 box-shadow 예시
브랜드 글로우
부드러운 컬러 글로우
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);X와 Y를 0으로 두면 글로우가 균일하게 퍼집니다. 약한 양수 spread는 blur가 부드럽게 풀어내기 전에 글로우를 살짝 두껍게 만듭니다. 색상 글로우는 시선을 강하게 끌므로 절제해 사용하세요.
눌린 inset 효과
눌린 느낌을 위한 inset 그림자
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);inset 그림자는 요소 안쪽에 그려집니다. 부드러운 그림자는 "우물"의 깊이를, 1px inset 은 내부 테두리를 만들어 형태를 또렷하게 합니다.
box-shadow에서 자주 하는 실수
- 높은 불투명도의 순수한 검정 사용. 그림자보다 단단한 컷아웃처럼 보입니다. 자연스러운 들뜸이라면 0.06–0.18로 낮추세요.
- Y 오프셋을 잊는 것. X=0, Y=0 그림자는 요소 바로 뒤에 균등하게 깔립니다 - 글로우엔 좋지만 떠 있어야 할 카드엔 어색합니다.
- 레이어를 너무 많이 쌓기. 보통 세 개면 충분하고, 열 개를 쌓으면 흐릿한 덩어리에 페인트 비용까지 늘어납니다.
CSS box-shadow 자주 묻는 질문
box-shadow 각 값은 무엇을 의미하나요?
box-shadow: x y blur spread color 입니다. 처음 두 개는 오프셋, *blur* 는 가장자리 흐림, *spread* 는 blur 전 크기, 색상은 임의의 CSS 색상(불투명도 조정엔 rgba()). 맨 앞에 inset 을 붙이면 안쪽에 그려집니다.한 규칙에 여러 그림자를 어떻게 쌓나요?
콤마로 구분하면 됩니다. 작성된 순서대로 뒤에서 앞으로 그려져, 먼저 선언한 그림자가 *아래쪽* 으로 갑니다. 짧은 접지 그림자와 부드러운 환경 그림자를 함께 쓰는 데 유용합니다.
box-shadow 와 filter: drop-shadow() 의 차이는?
box-shadow 는 요소 사각형을 따라가고 그리기 비용이 낮습니다. drop-shadow() 는 알파 채널을 따라가므로 SVG/투명 PNG에 강하지만 비용이 더 듭니다. 카드·버튼엔 box-shadow, 불규칙 형태엔 drop-shadow() 가 적합합니다.그림자가 픽셀처럼 거칠게 보이는 이유는?
blur가 매우 작거나(blur 0은 의도적으로 또렷한 그림자) 요소가 스케일되어 있는 경우입니다. blur를 올리거나 상위 노드에
transform: scale() 이 있는지 확인하세요.box-shadow 가 레이아웃에 영향을 주나요?
아니요. 그림자는 요소의 박스 바깥에 그려지지만 주변 콘텐츠를 밀어내지 않습니다. 부모가 그림자 공간을 비워야 한다면 padding을 주거나
overflow: visible 을 사용하세요.