📦 Box Shadow 생성기

Box Shadow 생성기란?

CSS box-shadow 속성을 시각적으로 조정하고 코드를 바로 복사할 수 있는 무료 온라인 도구입니다. 슬라이더를 움직이며 실시간으로 그림자 효과를 확인하고, 원하는 스타일을 쉽게 만들 수 있습니다.

이런 분들에게 추천합니다

• 웹 디자이너 - 카드, 버튼, 모달 디자인
• 프론트엔드 개발자 - CSS 그림자 코드 생성
• UI/UX 디자이너 - 깊이감 있는 인터페이스 디자인
• 초보 개발자 - box-shadow 속성 학습

사용 방법

1. 오프셋 조정: X, Y 슬라이더로 그림자 위치 조정
2. 흐림 효과: Blur 슬라이더로 그림자 부드러움 조절
3. 확산 정도: Spread 슬라이더로 그림자 크기 조절
4. 색상 선택: 원하는 그림자 색상과 투명도 설정
5. 내부 그림자: Inset 체크박스로 안쪽 그림자 효과
6. 프리셋 사용: 하단 프리셋 버튼으로 미리 만들어진 스타일 적용
7. 코드 복사: "📋 복사" 버튼으로 CSS 코드 복사

주요 기능

• 실시간 미리보기: 모든 변경 사항이 즉시 반영
• 직관적인 슬라이더: 마우스로 쉽게 값 조정
• 색상 선택기: 컬러 피커와 HEX 코드 입력 지원
• 투명도 조절: 0-100% 투명도 설정
• 내부 그림자: Inset 옵션으로 안쪽 그림자 효과
• 8가지 프리셋: 자주 쓰는 그림자 스타일 제공
• 원클릭 복사: CSS 코드를 클릭 한 번으로 복사

Box Shadow 속성 설명

• 가로 오프셋 (X): 그림자의 가로 위치 (-50px ~ 50px)
• 세로 오프셋 (Y): 그림자의 세로 위치 (-50px ~ 50px)
• 흐림 정도 (Blur): 그림자의 부드러움 (0 = 선명, 100 = 매우 흐림)
• 확산 정도 (Spread): 그림자의 크기 확대/축소
• 색상: 그림자의 색상 (HEX, RGB, RGBA 지원)
• 투명도: 그림자의 불투명도 (0% = 투명, 100% = 불투명)
• Inset: 체크 시 요소 안쪽으로 그림자 생성

활용 사례

• 카드 디자인: 콘텐츠 카드에 깊이감 추가
• 버튼 효과: 호버 시 그림자 변경으로 입체감
• 모달/팝업: 배경과 분리되는 느낌 연출
• 네비게이션: 고정 헤더에 그림자로 구분
• 이미지 갤러리: 사진에 액자 효과
• 입력 필드: 포커스 시 그림자로 강조

프리셋 그림자 스타일

• Subtle: 매우 은은한 그림자, 미니멀 디자인
• Soft: 부드러운 그림자, 일반적인 카드
• Medium: 적당한 깊이, 강조가 필요한 요소
• Large: 큰 그림자, 모달이나 중요한 요소
• Extra Large: 매우 큰 그림자, 드라마틱한 효과
• Inset: 내부 그림자, 눌린 듯한 효과
• Glow: 발광 효과, 네온 느낌
• Layered: 다층 그림자, 더 자연스러운 깊이

디자인 팁

• 자연스러운 그림자: Y 오프셋을 X보다 크게 설정 (빛이 위에서 오는 것처럼)
• 부드러운 느낌: Blur 값을 크게, Spread는 작게
• 선명한 그림자: Blur 값을 작게, Spread는 크게
• 떠있는 효과: Y 오프셋과 Blur를 크게
• 눌린 효과: Inset 사용, Y 오프셋을 음수로
• 다층 그림자: 여러 box-shadow를 쉼표로 구분하여 조합

자주 묻는 질문 (FAQ)