6XC

CSS 박스 그림자 생성기

오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요.

조회수 815회

box-shadow 속성이란

문법은 box-shadow: x y 흐림 퍼짐 색상입니다. 오프셋은 그림자의 위치를 옮기고, 흐림은 가장자리를 부드럽게 하며, 퍼짐은 그림자를 키우거나(음수면 줄이거나) 만듭니다. 색상에는 보통 알파값(예: rgba(0,0,0,0.15))을 넣어 사실감을 더합니다. inset을 추가하면 그림자가 박스 안쪽으로 그려집니다. x는 0, y는 작게, 불투명도는 낮게 준 부드러운 그림자가 가장 자연스러워 보입니다.

자주 묻는 질문

흐림과 퍼짐의 차이는 무엇인가요?

흐림은 크기를 바꾸지 않고 그림자의 가장자리만 부드럽게 만듭니다. 퍼짐은 흐림이 적용되기 전에 그림자를 사방으로 키우거나(음수면 줄입니다) 만듭니다.

우아하고 모던한 그림자는 어떻게 만드나요?

x는 0으로, y는 작게(2~8px), 흐림은 넉넉하게(10~30px), 불투명도는 낮게(0.08~0.2) 설정하세요. 좁은 그림자와 넓은 그림자를 겹쳐 두 개 쌓으면 입체감이 생깁니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기 CSS 글래스모피즘 생성기 실시간 미리보기로 유리(글래스모피즘) 효과를 디자인하세요 — 흐림, 투명도, 색조, 테두리를 조절하고 CSS를 복사하세요. 생성하기