Box Shadow 생성기
박스 그림자 생성기는 X·Y 오프셋, 흐림, 퍼짐, 색상, 불투명도, inset 슬라이더와 Material Design, Tailwind 프리셋으로 CSS box-shadow를 만들고 정확한 CSS를 출력합니다.
이 도구 소개
박스 그림자 생성기는 X·Y 오프셋, 흐림, 퍼짐, 색상, 불투명도, inset 슬라이더와 Material Design, Tailwind 프리셋으로 CSS box-shadow를 만들고 정확한 CSS를 출력합니다.
사용 방법
- 프리셋으로 시작하거나 사용자 지정을 그대로 둡니다.
- X/Y 오프셋, 흐림, 퍼짐, 불투명도를 조절합니다.
- 그림자 색을 고르고, 안쪽 그림자를 원하면 Inset을 체크합니다.
- CSS 복사를 눌러 box-shadow 규칙을 붙여 넣습니다.
알아두면 좋은 점
- box-shadow 문법은 [inset] offset-x offset-y blur-radius spread-radius color입니다.
- 흐림 반경이 클수록 가장자리가 부드러워지고, 퍼짐은 흐림을 적용하기 전에 그림자를 키우거나 줄입니다.
- 불투명도가 낮은 어두운 그림자(약 10–25%)가 완전한 검정보다 자연스럽게 보입니다.
- 여러 그림자를 쉼표로 구분해 겹칠 수 있습니다.
- inset 키워드를 쓰면 요소 테두리 안쪽에 그림자가 그려집니다.
모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.
자주 묻는 질문
CSS로 div에 그림자를 넣으려면 어떻게 하나요?
box-shadow 속성을 사용하세요. 예: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); 이 도구가 값을 대신 작성해 줍니다.
흐림과 퍼짐은 어떻게 다른가요?
흐림은 그림자 가장자리의 부드러움을 조절합니다. 퍼짐은 흐림이 적용되기 전에 그림자 크기를 늘리거나 줄입니다.
안쪽 그림자는 어떻게 만드나요?
값 맨 앞에 inset 키워드를 넣거나 도구에서 Inset을 체크하세요.
box-shadow를 여러 개 쓸 수 있나요?
네. 그림자를 쉼표로 구분하세요. Material이나 Tailwind 프리셋처럼 그림자를 겹치면 더 사실적으로 보입니다.