도구 소개
박스 그림자 생성기는 가로·세로 오프셋, 흐림 반경, 확산 반경, 색상, 불투명도와 inset으로 단일 박스 그림자를 만듭니다. 유효한 현재 설정은 미리보기 카드에 바로 적용됩니다.
사용 방법
- 가로·세로 오프셋과 흐림 반경을 조절하세요.
- 확산 반경, 그림자 색상, 불투명도를 설정하세요.
- 필요하면 inset 내부 그림자를 켜세요.
- 미리보기를 확인한 뒤 CSS를 복사하거나 기본 그림자로 초기화하세요.
사용 예제
- 가로 오프셋이 음수이면 그림자가 왼쪽으로 이동합니다.
- 확산 반경이 양수이면 그림자가 커지고 음수이면 작아집니다.
- inset을 켜면 그림자가 박스 안쪽에 표시됩니다.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);작동 원리 및 CSS 설명
box-shadow는 offset-x, offset-y, blur-radius, spread-radius, color 순서로 값을 받으며 inset을 추가할 수 있습니다. 오프셋과 확산은 음수가 가능하지만 흐림 반경은 0 이상이어야 합니다. 불투명도는 그림자와 배경이 섞이는 정도를 조절합니다.
주요 용도
- 패널, 팝업, 버튼에 깊이감을 더합니다.
- 부드러운 그림자와 선명한 그림자를 비교합니다.
- 폼 요소에 내부 그림자를 만듭니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
blur와 spread는 어떻게 다른가요?
blur는 가장자리의 흐림 정도를 조절합니다. spread는 흐림을 적용하기 전에 그림자 모양을 얼마나 키우거나 줄일지 결정합니다.
inset이란 무엇인가요?
inset은 바깥쪽 그림자를 박스 안쪽의 그림자로 바꿉니다.
box-shadow에 음수를 사용할 수 있나요?
가로·세로 오프셋과 확산 반경에는 음수를 사용할 수 있지만 흐림 반경에는 사용할 수 없습니다.
여러 겹의 그림자를 지원하나요?
이 페이지에서는 그림자 한 겹을 생성합니다. CSS 자체는 쉼표로 여러 box-shadow를 연결할 수 있습니다.