CSS 박스 그림자 생성기
슬라이더로 그림자를 조절하고 box-shadow 코드를 바로 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
offset·blur·spread·색상·투명도·inset를 슬라이더로 조절하며 실시간 미리보기로 그림자를 디자인하는 도구입니다. 완성된 box-shadow CSS를 바로 복사할 수 있어 웹 디자이너와 프론트엔드 개발자가 카드·버튼 그림자를 빠르게 만들 때 편리합니다.
사용 방법
- 슬라이더로 가로·세로 오프셋, 흐림(blur), 확산(spread), 투명도를 조절하세요.
- 그림자 색을 고르고, 필요하면 inset(안쪽 그림자)를 켜세요.
- 미리보기 박스에서 결과를 확인하세요.
- 생성된 box-shadow 코드를 복사해 사용하세요.
자주 묻는 질문
- inset은 무엇인가요?
- inset을 켜면 그림자가 요소 바깥이 아니라 안쪽으로 들어가, 눌린 듯한 움푹한 효과를 만듭니다. 입력창이나 눌린 버튼 표현에 자주 씁니다.
- 그림자를 여러 개 겹칠 수 있나요?
- 이 도구는 하나의 그림자를 만들어 줍니다. 여러 개가 필요하면 생성된 값을 쉼표로 이어 붙여 box-shadow에 여러 줄로 넣으면 됩니다.
- 입력한 값이 서버로 저장되나요?
- 아니요. 미리보기와 CSS 생성은 모두 브라우저 안에서 처리되며, 어떤 값도 서버로 전송되지 않습니다.