사용법
- 가로(X)·세로(Y) 위치로 그림자가 어느 방향으로 떨어질지 정합니다. Y를 양수로 두면 아래쪽에 그림자가 생깁니다.
- 흐림(blur)으로 그림자의 부드러움을, 확산(spread)으로 그림자의 크기를 조절합니다.
- 색상과 투명도를 조절해 그림자의 짙기를 맞춥니다. 자연스러운 그림자는 보통 낮은 투명도(10~25%)가 좋습니다.
- 안쪽으로 파인 효과가 필요하면 "내부 그림자(inset)"를 켜고, 완성되면 "CSS 복사"로 코드를 가져갑니다.
활용 팁
- 자연스러운 카드 그림자: 빛은 보통 위에서 내려오므로 X는 0, Y는 양수(4~12px), blur는 그보다 크게(16~30px), 투명도는 낮게 주면 떠 있는 듯한 부드러운 카드 그림자가 됩니다. 검정 대신 살짝 어두운 회색을 쓰면 더 자연스럽습니다.
- 버튼 눌림 효과는 inset: 내부 그림자를 켜면 요소가 안으로 들어간 느낌을 줄 수 있어, 입력창이나 눌린 상태의 버튼 표현에 적합합니다. blur를 작게, spread를 음수로 주면 테두리 안쪽 음영이 또렷해집니다.
- 입체감은 그림자 두 겹으로: 가까운 곳의 진한 그림자와 멀리 퍼지는 옅은 그림자를 함께 쓰면 더 사실적입니다. 이 도구로 각각의 값을 만든 뒤, 코드를 쉼표로 이어 붙이면 다중 그림자를 구성할 수 있습니다.
자주 묻는 질문
Q. blur와 spread는 어떻게 다른가요?
blur(흐림)는 그림자 가장자리를 얼마나 부드럽게 번지게 할지, spread(확산)는 그림자 자체를 얼마나 크게(양수) 또는 작게(음수) 만들지를 정합니다. blur는 흐릿함, spread는 크기라고 이해하면 쉽습니다.
Q. 색상 투명도는 왜 따로 조절하나요?
그림자는 보통 불투명한 색보다 반투명할 때 자연스럽습니다. 그래서 색상은 색상 피커로 고르고 투명도를 따로 조절해, 최종적으로 rgba 형식으로 코드를 생성합니다. 투명도 20% 안팎이 가장 무난합니다.
Q. 생성된 코드는 어떻게 쓰나요?
복사한 값은 CSS의 box-shadow 속성입니다. 원하는 요소 스타일에 그대로 붙여넣으면 적용됩니다. inset 키워드가 포함되면 내부 그림자로, 없으면 외부 그림자로 동작합니다.