CSS 그림자 생성기

참고자료

CSS box-shadow란?

CSS box-shadow 속성은 요소의 프레임 주위에 하나 이상의 그림자 효과를 추가합니다. 요소에 대한 상대적 오프셋, 블러 및 확산 반경, 색상, 그리고 선택적 inset 키워드로 정의됩니다. 여러 그림자는 쉼표로 구분되며 앞에서 뒤로 렌더링됩니다.

box-shadow 구문

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: 수평 거리. 양수 = 오른쪽, 음수 = 왼쪽.
offset-y: 수직 거리. 양수 = 아래, 음수 = 위.
blur-radius (선택, 기본 0): 큰 값은 더 부드럽고 확산된 그림자를 생성.
spread-radius (선택, 기본 0): 양수는 그림자를 확장, 음수는 축소.
inset (선택): 그림자를 요소 내부로 이동.

여러 그림자 레이어 사용

여러 그림자를 결합하면 사실적인 깊이 효과를 만들 수 있습니다. 일반적인 기법은 요소 가까이에 빽빽하고 어두운 그림자(정의용)와 멀리 크고 흐린 그림자(깊이용)를 결합하는 것입니다. Material Design과 현대적 디자인 시스템은 레이어 그림자를 사용하여 엘리베이션을 표현합니다.

그림자 디자인 팁

rgba() 또는 hsla() 색상 사용 — 반투명 그림자가 불투명한 것보다 자연스럽습니다.
광원을 일관되게 유지 — UI 전체에서 오프셋 방향을 통일하세요.
순수 검정 피하기 — 브랜드 색상의 어두운 톤을 사용하면 더 부드러운 그림자를 만들 수 있습니다.
성능 — box-shadow는 페인트 작업을 트리거합니다. 애니메이션 요소에는 filter: drop-shadow()를 권장합니다.

개인정보보호

모든 그림자 생성은 브라우저에서 100% 실행됩니다. 어떤 데이터도 서버로 전송되지 않습니다.