CSS 박스 그림자 만드는 법
바깥쪽 또는 안쪽 그림자 하나를 만들어요. 브라우저가 해석하는 순서 그대로 표준 box-shadow 값을 생성해요.
- 가로·세로 이동량을 입력하세요.
- 흐림 반경은 0 이상으로, 확장 거리는 양수·0·음수로 설정하세요.
- 그림자의 HEX 색상과 불투명도를 입력하세요.
- 바깥쪽 또는 안쪽을 선택하세요.
- 생성하고 시험 상자를 확인한 뒤 CSS 선언을 복사하세요.
네 길이값의 역할
첫 길이는 가로 이동량, 두 번째는 세로 이동량이에요. 양수는 오른쪽·아래로, 음수는 왼쪽·위로 옮겨요. 세 번째는 흐림 반경으로 음수가 될 수 없어요. 0이면 선명한 경계이고 값이 클수록 부드러운 전환 영역이 넓어져요. 네 번째는 확장 거리로 양수는 그림자 모양을 넓히고 음수는 줄여요.
바깥쪽·안쪽 그림자
바깥쪽 그림자는 테두리 상자 뒤에 그려지고 문서 배치를 바꾸지 않아요. 주변 콘텐츠와 겹칠 수 있어 미리보기에는 최대 범위만큼 공간을 확보해요. inset을 추가하면 상자 안으로 잘리는 내부 그림자가 돼요. 같은 이동량으로 샘플 안쪽 그림자의 모습이 이동해요.
색상·불투명도·복사한 CSS
불투명한 HEX 색상과 별도의 0~1 불투명도를 입력해요. 불투명도 1은 정규화된 6자리 HEX로, 더 작은 값은 rgba(red, green, blue, alpha)로 출력해요. 결과에는 시험 상자에 적용한 정확한 값을 보여 줘요. 칸을 수정하거나 비우면 이전 미리보기가 사라지고 새 값을 검증할 때까지 복사가 비활성화돼요.
지원 범위와 해석
- 그림자 레이어 하나만 지원해요. 쉼표로 여러 겹을 쌓지 않아요.
- 흐림은 0~200 px, 이동량과 확장은 −200~200 px예요.
- 전체 컴포넌트 디자인, 배경 편집, 애니메이션, 이미지 내보내기나 디자인 품질 보장은 제공하지 않아요.
- box-shadow는 배치에 영향을 주지 않으므로 큰 그림자는 겹칠 수 있어요. 실제 간격과 잘림 조건에서 최종 컴포넌트를 확인하세요.
예시
12px 12px 24px 0px rgba(0, 0, 0, 0.3)은 오른쪽 아래로 부드러운 외부 그림자를 만들어요.
inset 0px 4px 8px -2px rgba(17, 34, 51, 0.5)는 축소된 내부 그림자를 만들어요.
자주 묻는 질문
흐림을 음수로 설정할 수 있나요?
아니요. CSS의 흐림 반경은 0 이상이어야 하므로 음수를 거부해요.
확장 거리는 음수여도 되나요?
네. 음수 확장은 그림자 모양을 줄이며 그대로 유지돼요.
큰 그림자가 주변 콘텐츠를 밀지 않는 이유는?
박스 그림자는 시각 효과이며 배치 계산에 참여하지 않아요.
여러 레이어를 만들 수 있나요?
이 페이지는 그림자 하나만 생성해요.