Box Shadow Generator — CSS box-shadow 생성기

사용 방법

1. 슬라이더를 움직여 X/Y 오프셋, 블러, 스프레드를 조절합니다.
2. 색상과 불투명도를 선택하고 필요 시 Inset을 체크합니다.
3. 미리보기를 확인한 후 생성된 box-shadow 코드를 복사합니다.

언제 사용하나요

요소를 배경에서 살짝 띄워 입체감을 주거나, 화면의 깊이 단계를 표현하고 싶을 때 box-shadow를 사용합니다. 카드와 본문을 구분하거나, 떠 있는 버튼·드롭다운·모달을 강조할 때 그림자가 시각적 단서가 됩니다. 슬라이더로 값을 바꿔 미리보기에서 즉시 확인하면, 머릿속의 그림자 강도를 코드 값으로 옮기는 과정을 줄일 수 있습니다.

속성의 의미와 예시

box-shadow는 다섯 가지 값으로 모양이 정해집니다. X 오프셋은 좌우, Y 오프셋은 위아래로 그림자를 밀어내고, 블러는 가장자리를 얼마나 부드럽게 흐릴지, 스프레드는 그림자 자체를 얼마나 키울지를 정합니다. 불투명도는 그림자 색의 진하기입니다.

• 카드: 0 1px 3px rgba(0,0,0,.12) — 얕고 자연스러운 들뜸
• 떠 있는 버튼: 0 4px 12px rgba(0,0,0,.18) — 또렷한 높이감
• 모달: 0 16px 48px rgba(0,0,0,.24) — 화면 위에 크게 떠 있는 느낌
• 오목한 입력칸: Inset 체크 + 작은 블러 — 안쪽으로 눌린 효과

결과 해석과 주의사항

좋은 그림자는 보통 Y 오프셋과 블러가 함께 커지고 불투명도는 낮게 유지됩니다. 빛이 위에서 비치는 자연스러운 방향을 흉내 내기 때문입니다. 자주 어긋나는 부분은 다음과 같습니다.

• 오프셋·블러 없이 불투명도만 높여 테두리처럼 딱딱하게 보이는 경우
• 여러 요소에 제각각 다른 그림자를 써서 화면의 깊이 단계가 흐트러지는 경우
• 라이트 모드 기준으로 잡은 검은 그림자가 다크 모드에서는 거의 보이지 않는 경우

다크 모드에서는 어두운 그림자 대신 밝은 테두리나 더 큰 블러로 깊이를 표현하는 편이 자연스럽습니다. 한 화면에서는 그림자 단계를 두세 종류로 정해 두고 재사용하면 통일감이 생깁니다.

자주 묻는 질문

Inset(내부 그림자)은 어떤 경우에 사용하나요?

Inset은 요소 안쪽에 그림자를 표현합니다. 눌린 버튼, 오목한 입력 필드 등의 효과를 줄 때 사용합니다.

여러 겹의 box shadow를 적용할 수 있나요?

box-shadow 값을 쉼표로 연결하면 여러 겹의 그림자를 적용할 수 있습니다. 이 Box Shadow Generator에서 생성한 코드를 기반으로 쉼표를 추가하여 확장하세요.

블러와 스프레드는 어떻게 다른가요?

블러는 그림자 가장자리를 흐릿하게 만들고, 스프레드는 흐림 없이 그림자 영역 자체를 넓히거나 줄입니다. 스프레드를 음수로 주면 그림자가 요소보다 작아집니다.

그림자가 화면에서 잘려 보입니다

부모 요소에 overflow:hidden이 걸려 있으면 바깥으로 나간 그림자가 잘립니다. 그림자가 보일 만큼 여백을 두거나 overflow 설정을 확인하세요.

그림자가 너무 강하면 어떤 문제가 있나요?

진하고 큰 그림자는 요소를 떠 보이게 하지만 과하면 화면이 무겁고 지저분해집니다. 불투명도를 낮추고 블러를 키우면 같은 높이감을 더 부드럽게 표현할 수 있습니다.