박스 그림자 생성기 | 사용법·입력·결과 해설
카드나 버튼에 사용할 그림자를 조절하면서 CSS 선언을 확인합니다. 가로·세로 이동, 흐림, 확장, 색과 불투명도를 따로 바꾸어 그림자의 위치와 두께를 구분할 수 있습니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
계산 도구를 불러오는 중입니다. 도구가 표시되지 않으면 페이지를 새로고침하세요.
사용 방법과 입력
가로와 세로 오프셋을 픽셀로 정하고 흐림과 확장 값을 조정하세요. 안쪽 그림자가 필요하면 inset을 켜고 배경색 위에서 투명도 효과를 살펴보세요.
결과 해설과 예제
가로 0, 세로 8, 흐림 24, 확장 0이면 아래로 8px 이동한 흐린 그림자를 만듭니다. 출력한 box-shadow 선언을 대상 요소의 스타일에 붙여 넣어 확인하세요.
입력·결과 예시
가로 0, 세로 8, 흐림 24, 확장 0이면 아래로 8px 이동한 흐린 그림자를 만듭니다. 출력한 box-shadow 선언을 대상 요소의 스타일에 붙여 넣어 확인하세요.
한계와 주의사항
- 그림자가 충분한 색 대비나 키보드 포커스 표시를 자동 보장하지 않습니다.
- 여러 개의 그림자를 겹치는 복합 목록 편집기는 아닙니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| X 오프셋 (px) | 화면의 단위와 입력 형식을 확인하세요. |
| Y 오프셋 (px) | 화면의 단위와 입력 형식을 확인하세요. |
| Blur (px) | 화면의 단위와 입력 형식을 확인하세요. |
| Spread (px) | 화면의 단위와 입력 형식을 확인하세요. |
| 그림자 색 | 화면의 단위와 입력 형식을 확인하세요. |
| inset | 화면의 단위와 입력 형식을 확인하세요. |
| CSS | 화면의 단위와 입력 형식을 확인하세요. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
세로 오프셋 8은 어떤 효과인가요?
가로 0, 세로 8, 흐림 24, 확장 0이면 아래로 8px 이동한 흐린 그림자를 만듭니다. 출력한 box-shadow 선언을 대상 요소의 스타일에 붙여 넣어 확인하세요.
그림자만으로 접근성 표시가 완성되나요?
그림자가 충분한 색 대비나 키보드 포커스 표시를 자동 보장하지 않습니다. 여러 개의 그림자를 겹치는 복합 목록 편집기는 아닙니다.
