CSS box-shadow 생성기. 멀티 레이어·내부·글로우·뉴모피즘.
🌑 미리보기
📦 그림자 카드
사용법
- 스타일 선택 (7가지: 머티리얼·부드러움·샤프·내부·글로우·뉴모피즘·레이어드)
- X/Y 오프셋·블러·확산 조정
- 그림자 색·불투명도 설정
- CSS 복사
주요 기능
- 7가지 프리셋 스타일
- X/Y 오프셋 ±40px, 블러 0~80px, 확산 ±20~40px
- 그림자 색 + 불투명도 조정
- 내부(inset) 그림자, 글로우, 뉴모피즘 자동 생성
- 레이어드 (다중 박스섀도)로 입체감 극대화
활용 예시
- 카드 UI — Material Design, 모달, 팝업
- 버튼 hover — 들어올리기 효과
- 이미지 갤러리 — 사진 입체감
- 입력 폼 — 포커스 시 글로우
- 뉴모피즘 UI — 양면 그림자로 부드러운 입체감
box-shadow 마스터하기
구문: `box-shadow: X Y BLUR SPREAD COLOR;` (`inset` 키워드로 내부 그림자). (1) Y만 양수, X는 0이 자연스러운 (해는 위쪽). (2) BLUR ≥ Y 이면 부드럽고 큰 그림자, BLUR < Y면 샤프함. (3) SPREAD는 그림자 면적 자체를 확장/축소. (4) 여러 그림자를 쉼표로 구분해 멀티 레이어 생성 — 실제 빛 시뮬레이션에 가까워짐 (Material Design Elevation 시스템).
자주 묻는 질문
filter:drop-shadow와 차이?
`box-shadow`는 박스 모양에만, `filter:drop-shadow`는 투명도 마스크에 따라 그림자가 따라옴 (PNG 투명 이미지 가능).
성능 영향?
큰 블러 값(>40px) + 다중 레이어는 모바일에서 성능 저하. transform 애니메이션과 같이 쓸 땐 주의.
다크 모드?
다크 배경에선 그림자 색을 더 어둡거나 투명도를 높여야 보임. 또는 흰 글로우(white)로 변환.
무료인가요?
네.