CSS Box Shadow 생성기

Blur는 그림자 경계를 부드럽게 만들며, 투명으로 사라지는 거리를 뜻합니다. Spread는 흐림 전에 그림자 모양 자체를 키우거나 줄입니다(음수면 안쪽으로 끌어당깁니다).

자연스러운 그림자는 보통 2개 이상이 필요합니다 — 가까이 진한 레이어 + 멀리 흐릿한 레이어. Material Design이나 Tailwind 기본 그림자도 대부분 다중 레이어입니다.

투명도가 있는 색이 배경에 자연스럽게 녹아들어 더 사실적입니다. rgba()는 알파(투명도)를 직접 지정할 수 있습니다.

Tailwind는 공백을 클래스 구분자로 취급해서, 임의값에선 공백 대신 밑줄을 씁니다.

그래야 겹친 그림자가 후광처럼 보이지 않기 때문입니다. 흐려진 그림자는 사방으로 퍼지므로, 스프레드가 0이면 요소 위쪽으로도 아래쪽만큼 삐져나와 결과가 표면에 놓인 물체가 아니라 발광체처럼 보입니다. 스프레드를 음수로 당기면 흐림을 적용하기 전에 모양이 줄어들어, 보이는 부드러움이 요소 아래와 바로 밑에만 남습니다. 여기 기본값이 단순한 흐림 두 개가 아니라 0 8px 24px −4px 위에 0 2px 6px −2px인 이유가 그것입니다.

레이아웃에는 전혀 영향을 주지 않습니다. 그림자는 보더 박스 바깥에 그려지고 요소의 너비·높이나 부모의 스크롤 영역에 아무것도 더하지 않습니다. 테두리와 다른 점입니다. 다만 잘리기는 합니다. overflow: hidden인 부모나 자식을 잘라 내는 둥근 카드는 가장자리에서 그림자를 끊어 버립니다. 그림자가 한쪽에서만 사라진다면 오프셋을 조정하지 말고 잘라 내고 있는 조상 요소를 찾아보세요.