박스 쉐도우

박스 그림자를 시각적으로 만들고 CSS 코드를 복사하는 도구입니다.

오프셋, 블러, 스프레드, 색상을 슬라이더로 조절해 박스 그림자를 디자인합니다. 실시간 미리보기를 확인하고 CSS 코드를 복사해 바로 적용할 수 있습니다.

이 도구가 필요한 이유

CSS box - shadow는 카드, 모달, 버튼 등에 깊이감을 주는 자주 쓰이는 속성이지만, offset, blur, spread, color 값을 숫자로만 조합하면 결과를 예측하기 어렵습니다. 특히 여러 겹의 그림자를 쌓거나 inset 옵션을 추가하면 경우의 수가 많아져, 코드만으로 원하는 결과를 맞추기 어렵습니다.

슬라이더로 값을 조정하며 실시간으로 결과를 보는 방식이 훨씬 빠르고 정확합니다.

도움이 되는 작업

실시간 미리보기 덕분에 값을 미세하게 조정하면서 즉시 결과를 확인할 수 있습니다. 여러 그림자 레이어를 추가해 복잡한 효과를 만들 때도 직관적으로 작업할 수 있습니다.

생성된 코드를 그대로 CSS에 붙여넣으면 되므로, 속성 문법을 외우지 않아도 정확한 코드를 얻을 수 있습니다.

예시

카드 UI에 자연스러운 그림자 추가하기

카드형 레이아웃에서 적절한 그림자는 요소를 부각시키는 역할을 합니다. 블러와 투명도를 조절해 자연스러운 그림자를 만들고 CSS를 바로 적용할 수 있습니다.

버튼 hover 상태에 그림자 효과 넣기

버튼에 마우스를 올렸을 때 그림자가 커지면 누를 수 있다는 피드백을 줍니다. 기본 상태와 hover 상태의 그림자 값을 각각 만들어 비교할 수 있습니다.

inset 그림자로 오목한 효과 만들기

입력 필드나 패널에 inset 그림자를 넣으면 눌려 있는 느낌을 줄 수 있습니다. inset 옵션을 켜고 값을 조정하면 코드에서 시행착오 없이 원하는 효과를 얻을 수 있습니다.