CSS Box Shadow 생성기
웹 요소에 입체감을 주는 그림자 효과(box-shadow)를 시각적으로 디자인하고 CSS 코드를 생성하는 도구입니다. 복잡한 수치를 직접 입력할 필요 없이 슬라이더로 조절하며 원하는 느낌을 찾을 수 있습니다.
1이 도구는 언제 쓰나요?
💡버튼이나 카드 UI에 입체감을 줄 때
💡부드러운 그림자 효과를 실험해볼 때
💡CSS 코드를 직접 작성하기 귀찮을 때
2주요 기능
- 직관적인 슬라이더 컨트롤
- 실시간 미리보기
- Inset(안쪽 그림자) 지원
- 원클릭 CSS 코드 복사
3사용 방법
- X/Y 오프셋, 흐림(Blur), 확산(Spread) 슬라이더를 조절하세요.
- 그림자 색상과 투명도를 설정하세요.
- 미리보기 박스에서 효과를 확인하고 생성된 CSS 코드를 복사하세요.
자주 묻는 질문
Q. 여러 개의 그림자를 겹칠 수 있나요?
A. 현재 버전은 단일 그림자만 지원하지만, 생성된 코드를 콤마(,)로 연결하여 직접 수정하면 여러 그림자를 적용할 수 있습니다.