CSS 박스 그림자 생성기
수평 및 수직 오프셋, 흐림 효과, 확산 거리, 색상 및 내부 그림자 옵션을 조정하여 즉시 적용 가능한 CSS box-shadow 코드를 생성합니다.
도구 실행
웹 디자인에서 요소에 깊이를 더하는 박스 그림자는 시각적 계층 구조를 만드는 데 필수적입니다. 이 도구는 복잡한 CSS 구문을 직접 입력하지 않고도 직관적인 컨트롤을 통해 정밀한 그림자 효과를 설계할 수 있도록 돕습니다. 수평 및 수직 오프셋으로 그림자의 위치를 지정하고, 흐림 반경과 확산 거리를 조절하여 부드러움과 크기를 제어합니다. HEX 또는 RGBA 형식의 색상을 선택하여 톤을 맞추고, 필요 시 내부 그림자(inset) 옵션을 활성화하여 입체감을 표현할 수 있습니다. 모든 설정 변경은 실시간으로 반영되며, 완성된 CSS 선언문은 복사하여 스타일시트에 바로 붙여넣을 수 있습니다. 기본값은 미세한 그림자를 제공하지만, 숫자 필드에 0을 입력하여 특정 효과를 제거하거나 강조할 수도 있습니다. 반응형 레이아웃이나 카드 UI 디자인 시 일관된 그림자 스타일을 빠르게 프로토타이핑하고 검증하는 데 유용합니다.
사용 방법
- 수평 오프셋(Offset X)과 수직 오프셋(Offset Y) 값을 픽셀 단위로 입력하여 그림자의 방향을 설정합니다.
- Blur(흐림) 값을 조정하여 그림자 가장자리의 부드러움을 결정합니다.
- Spread(확산) 값을 입력하여 그림자의 전체 크기를 확장하거나 축소합니다.
- Color(색상) 필드에 원하는 HEX 또는 RGBA 색상 코드를 입력합니다.
- 그림자가 요소 내부에 표시되도록 하려면 Inset(내부) 체크박스를 선택합니다.
- 생성된 CSS 코드를 복사하여 프로젝트의 스타일시트에 붙여넣습니다.
예시
- 오프셋 2px, 흐림 5px, 확산 0px, 색상 #00000033을 사용한 부드러운 기본 그림자
- 오프셋 0px, 흐림 10px, 확산 4px, 색상 rgba(0,0,0,0.2)를 사용한 넓은 배경 그림자
- Inset 활성화, 오프셋 0px, 흐림 3px, 색상 #ffffff80을 사용한 내부 하이라이트 효과
자주 묻는 질문
생성된 CSS 코드는 어떻게 사용하나요?
결과 영역에 표시된 코드를 복사하여 CSS 파일의 클래스 선택자 안이나 HTML 요소의 style 속성에 붙여넣으면 됩니다.
그림자를 요소 내부에 만들 수 있나요?
네, '내부 그림자' 체크박스를 선택하면 생성된 코드에 inset 키워드가 포함되어 그림자가 테두리 안쪽으로 표시됩니다.
숫자 값에 0을 입력해도 되나요?
예, 모든 숫자 필드에 0을 입력할 수 있습니다. 예를 들어 확산 값을 0으로 설정하면 그림자의 크기가 원본 요소와 동일하게 유지됩니다.
어떤 색상 형식을 지원하나요?
HEX 코드(#RRGGBB 또는 #RRGGBBAA)와 RGBA 함수 표기법 등 표준 CSS 색상 형식을 텍스트 필드에 입력할 수 있습니다.