박스 그림자 생성기

흐림은 그림자 가장자리를 부드럽게 해요. 값이 클수록 더 퍼져 보여요. 확산은 흐림을 적용하기 전에 그림자를 키우거나 줄여요. 확산을 음수로 하고 흐림을 크게 하면 요즘 인터페이스에서 흔히 보는 부드럽게 떠 있는 느낌이 나요.

실제 그림자는 물체 가까이에 어둡고 좁은 중심이 있고, 멀어질수록 부드럽고 넓게 퍼져요. 작고 선명한 레이어에 크고 옅은 레이어 한두 개를 겹치면 이를 재현할 수 있어, 그림자 하나보다 훨씬 자연스러워 보여요.

안쪽 그림자는 요소 바깥이 아니라 안쪽에 그려져요. 표면이 눌려 들어간 것처럼 보여서 입력 필드나 눌린 버튼에 잘 어울려요.

네. box-shadow, 여러 레이어, 코드에 쓰인 rgb() 색상 문법은 현재의 모든 브라우저에서 지원돼요.

정적인 그림자는 그리는 부담이 적어요. 많은 요소에 아주 큰 흐림을 주거나 그림자 자체에 애니메이션을 주면 부담이 커질 수 있어요. 그림자를 부드럽게 애니메이션하려면 그림자를 가진 가상 요소의 불투명도를 바꾸세요.