CSS 박스 그림자 생성기
슬라이더로 X/Y 오프셋, 블러, 확산, 불투명도를 조절하고 색상을 선택하면 실시간 미리보기와 함께 CSS 속성이 즉시 생성됩니다.
가로·세로 오프셋, 블러, 퍼짐, 불투명도, 색상과 inset 여부를 조절해 하나의 CSS box-shadow 선언을 시각적으로 생성합니다.
CSS 박스 그림자 만드는 방법
- X와 Y 슬라이더로 그림자 위치를 정합니다.
- 블러, 퍼짐, 불투명도, 색상과 inset 여부를 조절합니다.
- 미리보기를 확인하고 생성된 box-shadow 선언을 복사합니다.
이 도구의 동작 방식
선택한 HEX 색상을 rgba()로 바꾸고 불투명도는 소수 둘째 자리까지 반영합니다.
한 번에 하나의 box-shadow 값만 만들며 여러 겹 그림자나 text-shadow는 만들지 않습니다.
개인정보와 제한
모든 조작과 미리보기는 브라우저 안에서 처리됩니다. UI에 표시된 슬라이더 범위 안에서만 조절할 수 있고 한 번에 한 개의 그림자 선언만 생성합니다.
CSS box-shadow 자주 묻는 질문
inset 그림자도 되나요?
네. Inset 옵션을 켜면 inset 키워드가 붙습니다.
여러 겹 그림자를 만들 수 있나요?
아니요. 한 개의 그림자 레이어만 생성합니다.
색상은 어떤 형식으로 나오나요?
선택한 HEX 색상을 rgba()로 변환합니다.
퍼짐 값을 음수로 줄 수 있나요?
네. 슬라이더 범위 안에서 음수 spread를 지원합니다.
데이터를 업로드하나요?
아니요. 브라우저에서 로컬로 동작합니다.