CSS 박스 섀도우 생성기

사용 방법

1. 수평 오프셋과 수직 오프셋 슬라이더로 그림자 위치를 조정합니다.
2. 블러 반경을 높여 그림자 테두리를 부드럽게 하거나, 0으로 설정해 날카로운 그림자를 만듭니다.
3. 스프레드 반경으로 그림자 크기를 확대하거나 축소합니다.
4. 불투명도로 그림자의 투명도를 제어합니다.
5. 색상 선택기 또는 hex 값을 직접 입력하여 그림자 색상을 설정합니다.
6. 인셋 토글로 외부 그림자와 내부 그림자 모드를 전환합니다.
7. 컨트롤을 조정하면 미리보기 박스가 실시간으로 업데이트됩니다.
8. 복사를 클릭하여 생성된 box-shadow CSS 값을 클립보드에 복사합니다.

box-shadow 구문 참조

/* 기본 외부 그림자 */
box-shadow: offsetX offsetY blur spread color;

/* 인셋 그림자 */
box-shadow: inset offsetX offsetY blur spread color;

/* 다중 그림자 */
box-shadow: shadow1, shadow2, shadow3;

주요 사용 사례

• 카드 부유감: box-shadow: 0 4px 16px rgba(0,0,0,0.12) — 미묘한 플로팅 카드 효과
• 하드 드롭 섀도우: box-shadow: 4px 4px 0 rgba(0,0,0,1) — 레트로/볼드 디자인 스타일
• 포커스 링: box-shadow: 0 0 0 3px rgba(59,130,246,0.5) — 접근성 포커스 표시기
• 내부 그림자 (입력 필드): box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)
• 글로우 효과: box-shadow: 0 0 20px rgba(99,102,241,0.6) — 네온/글로우 하이라이트

관련 도구

• CSS 변수 생성기 — 그림자 값을 디자인 토큰으로 저장
• CSS Grid 생성기 — 그리드 레이아웃을 시각적으로 구성