CSS Box Shadow 생성기

CSS Box Shadow란?

box-shadow는 HTML 요소 주위에 그림자 효과를 만드는 CSS 속성입니다. 카드 UI, 버튼 호버 효과, 모달 팝업 등 웹 디자인 전반에서 깊이감과 입체감을 표현할 때 사용됩니다. 한 요소에 여러 개의 그림자를 쉼표로 구분하여 겹칠 수 있으며, 외부 그림자와 내부(inset) 그림자를 조합해 다채로운 효과를 만들 수 있습니다. 이 생성기를 사용하면 슬라이더 조작만으로 원하는 그림자를 시각적으로 디자인하고, 완성된 CSS 코드를 바로 복사할 수 있습니다.

이용 가이드

1. 프리셋 버튼 중 하나를 클릭하여 기본 스타일을 선택합니다.
2. 수평/수직 오프셋 슬라이더로 그림자의 위치를 조정합니다.
3. 블러 반경을 높이면 부드럽고 퍼지는 그림자가 되고, 0으로 하면 날카로운 그림자가 됩니다.
4. 스프레드 값을 양수로 하면 그림자가 커지고, 음수로 하면 작아집니다.
5. 그림자 색상과 투명도를 취향에 맞게 설정합니다.
6. 내부 그림자가 필요하면 inset 체크박스를 활성화합니다.
7. 하단의 CSS 코드를 복사하여 프로젝트에 붙여넣습니다.

핵심 기능

• 실시간 미리보기 - 슬라이더를 움직이면 즉시 그림자 변화를 확인할 수 있습니다.
• 6가지 프리셋 - 은은한, 보통, 큰, 날카로운, 몽환적, 내부 그림자 등 자주 쓰이는 스타일을 원클릭으로 적용합니다.
• 색상 커스텀 - 그림자 색상, 박스 색상, 배경 색상을 자유롭게 변경할 수 있습니다.
• 투명도 조절 - 그림자의 불투명도를 0~100%까지 세밀하게 설정합니다.
• Inset 모드 - 체크박스 하나로 외부 그림자와 내부 그림자를 전환합니다.
• CSS 코드 복사 - 완성된 box-shadow 코드를 클립보드에 바로 복사합니다.

이런 상황에서 유용해요

• 카드 컴포넌트 - 은은한 그림자로 카드가 떠 있는 느낌을 줍니다. offset-y 4px, blur 6px 정도가 적당합니다.
• 버튼 호버 효과 - 마우스를 올렸을 때 그림자를 강화하여 버튼이 올라오는 인터랙션을 만듭니다.
• 모달/팝업 - 큰 블러와 높은 offset으로 배경과 확실히 분리되는 레이어 효과를 줍니다.
• 입력 필드 포커스 - inset 그림자와 색상 그림자를 조합하여 포커스 상태를 표현합니다.

궁금한 점 모음