CSS Box Shadow 생성기

CSS Box Shadow란?

box-shadow는 CSS 속성으로 HTML 요소 주변에 그림자 효과를 만듭니다. 단순한 드롭 섀도우부터 neumorphism 스타일의 복잡한 그림자까지, 이미지 처리 없이 순수 CSS만으로 깊이감과 입체감을 연출할 수 있습니다. 모던 웹 디자인에서 카드·버튼·박스의 시각 계층을 표현하는 핵심 도구이며, 성능(이미지 로드 불필요)과 유지보수(색상·크기 즉시 변경)에서 매우 효율적입니다.

이렇게 쓰세요

1. offset-x / offset-y 슬라이더로 그림자의 위치를 정합니다. 음수면 왼쪽/위, 양수면 오른쪽/아래입니다.
2. blur로 그림자 가장자리의 흐림 정도를, spread로 그림자 크기를 조절합니다. 색상 피커와 투명도로 그림자 모양을 마무리합니다.
3. 필요하면 inset 체크박스로 안쪽 그림자 효과를 추가한 뒤, CSS 코드 복사 버튼으로 코드를 클립보드에 복사합니다.

자주 쓰는 그림자 패턴

• 카드 그림자: offset-x 0, offset-y 2~4px, blur 8~12px, 투명도 0.1~0.2. 웹사이트 카드·모달에서 가장 흔한 패턴입니다.
• 뜬듯한 효과: offset-y를 크게(8~16px), blur를 높게(16~32px), 투명도를 낮게(0.1~0.15). 마치 떠 있는 것처럼 보입니다.
• 내부 함몰: inset 체크, offset 0, blur 중간(8~12px), 투명도 0.2. 상자 안쪽이 파인 효과를 냅니다.
• Neumorphism: 밝은 inset 그림자(흰색)와 어두운 외부 그림자(검은색)를 조합. 부드럽고 입체적인 현대식 UI 스타일입니다.

알아두면 좋은 점

• 음수 offset-x/y를 사용하면 그림자가 반대 방향(왼쪽·위)으로 나타납니다. 버튼을 누른 상태처럼 표현할 때 유용합니다.
• spread가 음수면 그림자가 원래 상자보다 작아집니다. 음수를 조합하면 세밀한 border 대용 효과도 만들 수 있습니다.
• 쉼표로 여러 box-shadow를 연결하면 복합 그림자를 만들 수 있습니다. 예: box-shadow: 0 4px 6px ..., inset 0 0 4px ...;
• box-shadow는 transition과 함께 애니메이션할 수 있습니다. 버튼 hover 효과에 자주 쓰입니다.
• 매우 큰 blur나 spread를 과도하게 쓰면 성능 저하가 있을 수 있습니다. 대부분의 경우 blur ≤ 50, spread ≤ 20이면 충분합니다.

자주 묻는 질문