CSS 박스 그림자 생성기 — 미리보기로 그림자 제작
오프셋, 흐림, 확산, 색상, 내부 그림자 컨트롤로 CSS box-shadow 효과를 시각적으로 만들고 코드를 복사하세요.
🔒 모두 브라우저 안에서 동작합니다. 입력과 출력은 서버로 전송되거나 저장되지 않아 안전합니다.
도움이 됐나요? 눌러서 반응하기
이 도구 소개
수평·수직 오프셋, 흐림, 확산, 색상, inset 옵션을 설정해 CSS box-shadow 효과를 시각적으로 만들고 결과를 실시간으로 미리 봅니다. 마음에 들면 생성된 box-shadow 코드를 바로 스타일시트에 복사하세요. 모든 작업은 브라우저에서 이루어집니다.
자주 묻는 질문
box-shadow 값들은 각각 무엇을 의미하나요?
순서대로 수평 오프셋, 수직 오프셋, 흐림 반경, 확산 반경, 색상입니다. inset을 추가하면 그림자가 요소 뒤가 아니라 안쪽에 그려져 눌린 듯하거나 움푹한 느낌을 줄 때 유용합니다.
부드럽고 은은한 그림자는 어떻게 만드나요?
작은 오프셋과 큰 흐림 반경, 그리고 낮은 불투명도의 색을 사용하세요. 몇 픽셀 아래로 내리고 흐림을 충분히 준 은은한 그림자는 자연스러운 입체감으로 보이지만, 또렷하고 진한 그림자는 무거워 보일 수 있습니다.
서버로 전송되는 것이 있나요?
아니요. 미리보기와 생성된 CSS는 모두 브라우저에서 만들어지므로 작업한 어떤 내용도 업로드되거나 저장되지 않습니다.