CSS box-shadow 생성기

작동 방식

box-shadow는 숫자 네 개와 색상을 정해진 순서로 받으며, 입체감으로 보이는 그림자와 스티커처럼 보이는 그림자의 차이는 전적으로 그 숫자에 달려 있습니다. 끌면서 바로 바뀌는 모습을 보는 것이 짐작하는 것보다 훨씬 빠릅니다.

네 숫자의 의미

순서대로 가로 오프셋, 세로 오프셋, 흐림 반경, 확산입니다. 오프셋은 그림자를 옮기고, 흐림은 가장자리를 부드럽게 하며, 확산은 흐림을 적용하기 전에 그림자를 키우거나 줄입니다. 확산이 음수이면 그림자가 안쪽으로 들어오므로, 카드 아래에 옆으로 번지지 않는 촘촘한 그림자를 만들 수 있습니다.

자연스럽게 보이게 하기

빛은 보통 위에서 오므로, 가로 오프셋 없이 약간의 양수 세로 오프셋을 주면 자연스럽게 보입니다. 크고 아주 투명한 그림자는 부드러운 깊이로, 작고 짙고 선명한 그림자는 오려 붙인 스티커처럼 보입니다. 실제 물체는 표면에서 멀수록 그림자가 더 흐려지므로, 흐림이 클수록 요소가 더 높이 떠 있는 것처럼 보입니다.

inset 그림자

inset 그림자는 요소 바깥이 아니라 안쪽에 그려지며, 눌린 버튼, 입력 필드, 움푹 들어간 패널이 이렇게 만들어집니다. 같은 네 숫자가 적용되고, 방향만 안쪽을 향합니다.

여러 그림자를 한꺼번에

CSS는 쉼표로 구분한 목록을 받으며, 촘촘하고 짙은 그림자와 넓고 옅은 그림자를 겹치면 하나만 쓸 때보다 훨씬 보기 좋습니다. 이 생성기는 하나만 만들어 주므로, 겹친 효과를 내려면 두 개를 직접 이어 붙이세요.