박스 그림자 생성기
Box shadow CSS 값을 미리 보며 카드와 버튼용 그림자 CSS를 생성합니다.
검색 의도형 설명
카드·버튼·모달에서 바로 쓰는 CSS box-shadow
offset-x, offset-y, blur, spread, color, inset를 조합해 컴포넌트 깊이와 경계를 조절합니다.
박스 그림자는 위치(offset), 흐림(blur), 확산(spread), 색상(color), 내부 그림자(inset) 설정으로 UI의 음영 깊이와 레이어 구분을 빠르게 맞출 수 있습니다.
이 도구는 생성한 값을 카드, 버튼, 모달 같은 실제 요소에 붙여 넣기 전에 다크/라이트 배경에서 그림자 대비와 가독성을 함께 확인하기 위한 검색 중심의 CSS 값 생성 보조 도구입니다.
적합한 사용 시나리오
카드 hover, 버튼 강조, 모달 오버레이, 토스트 알림 등 작은 컴포넌트의 시각적 위계를 만들 때.
파라미터 조합 가이드
x/y 오프셋은 방향을, blur는 부드러움을, spread는 범위를, color는 계열 톤을, inset는 안쪽 질감을 담당합니다.
적용 전 체크포인트
실제 페이지 배경색/브랜딩 톤, 다크모드, 버튼 텍스트 대비, 디자인 시스템 토큰의 반경·간격·그림자 톤과의 일치 여부를 확인하세요.
코드는 빠른 미리보기와 복사용 생성에 집중하므로 최종 반영 전 실제 화면에서 배경·모드·디자인 시스템 토큰별 렌더링 차이를 한 번 더 검수하세요.
박스 그림자 생성기 박스 그림자 생성 작업 영역
사용 방법
- 1 그림자 항목을 추가하고 X/Y 위치, 흐림, 확산 값을 조정합니다.
- 2 색상과 inset 여부를 바꾸며 미리보기에서 깊이를 확인합니다.
- 3 생성된 box-shadow CSS를 복사해 스타일시트에 붙여넣습니다.
대표적인 사용 사례
- 카드 box-shadow CSS 제작
- 다중 그림자 레이어 조정
- 내부 그림자 값 복사
자주 묻는 질문
어떤 그림자 값을 조정할 수 있나요?
X/Y 오프셋, 블러, 확산, 색상, 투명도, inset 여부를 조정하고 여러 그림자 레이어를 추가하거나 삭제할 수 있습니다.
생성된 box-shadow CSS를 바로 사용할 수 있나요?
네. 미리보기 아래에 완성된 box-shadow CSS가 표시되며 복사 버튼으로 클립보드에 복사할 수 있습니다.
값을 바꿀 때마다 미리보기가 갱신되나요?
슬라이더와 색상 값을 조정하면 미리보기 박스와 CSS 출력이 즉시 갱신됩니다.