도구 가이드
그림자는 요소가 화면에서 떠 있는 정도를 표현해 화면에 층을 만듭니다. 카드, 버튼, 팝업이 배경과 구분되어 보이는 것은 대부분 그림자 덕분입니다.
CSS의 box-shadow는 가로·세로 오프셋, 블러 반경, 확산 반경, 색상 다섯 값을 순서대로 받습니다. 값의 순서와 역할을 외우기 번거롭고 조금만 바꿔도 인상이 달라져 눈으로 확인하며 조정하는 편이 훨씬 빠릅니다.
이 도구는 슬라이더로 각 값을 조절하면 미리보기가 즉시 반영되고 완성된 CSS 코드를 제공합니다. inset을 켜면 안쪽으로 파인 그림자도 만들 수 있습니다.
사용 방법
- 가로·세로 오프셋으로 그림자 위치를 정합니다.
- 블러 반경으로 그림자의 부드러움을 조절합니다.
- 확산 반경과 색상·투명도를 조정합니다.
- 미리보기를 확인하고 CSS 코드를 복사합니다.
이럴 때 유용해요
- 카드 컴포넌트에 은은한 입체감을 줄 때
- 버튼의 눌림 상태를 안쪽 그림자로 표현할 때
- 모달이나 드롭다운을 배경과 분리할 때
- 디자인 시스템의 그림자 단계를 정의할 때
사용 팁
- 실제 그림자는 아래쪽으로 지므로 세로 오프셋을 양수로 주면 자연스럽습니다.
- 검정을 그대로 쓰기보다 투명도를 10~20%로 낮춘 색이 훨씬 부드럽습니다.
- 그림자를 여러 겹 쌓으면 더 사실적입니다. 짧고 진한 그림자와 넓고 옅은 그림자를 함께 쓰세요.