the IT Hustle
도구실전 매뉴얼소개

회사

  • 소개
  • 실전 매뉴얼
  • AI 용어집
  • 필자 소개
  • 문의

제품

  • 도구
  • AI 가격 동향
  • 에이전트 옵스
  • 코드
  • 디자인
  • 시스템 관리
  • 생산성
  • 마케팅
  • 비즈니스

법적 고지

  • 개인정보 처리방침
  • 이용약관
  • 면책 조항
  • 편집 원칙
  • 정정 안내

© 2026 Salty Rantz LLC. 모든 권리 보유.

기술 변혁 속에서 일하는 사람들을 위해 만들었습니다.

Box Shadow 생성기

CSS box shadow를 시각적으로 디자인합니다. 다중 레이어, 인셋, 뉴모피즘과 글래스모피즘 프리셋.

CSS Box Shadow 생성기

Design multi-layer box shadows visually. Adjust offsets, blur, spread, and color per layer. Apply presets or build from scratch.

박스 설정
프리셋
CSS 출력
box-shadow:
    0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Shadow Layers (1)
Layer 1
Offset X0px
Offset Y4px
Blur12px
Spread0px
Opacity25%
색상#000000

박스 그림자 디자인하는 방법

여러 겹의 CSS 박스 그림자를 만들어 보세요.

  1. 1
    레이어 추가각 그림자마다 Add Layer를 클릭하세요.
  2. 2
    조정레이어별로 오프셋, 블러, 확산, 색상, 내부 그림자 여부를 설정하세요.
  3. 3
    복사생성된 box-shadow CSS를 복사하세요.

자주 묻는 질문

은은한 내부/외부 그림자로 도드라지거나 눌린 느낌을 주는 부드러운 UI 스타일입니다. 프리셋이 두 레이어를 모두 생성합니다.

CSS는 무제한을 지원합니다. 이 도구는 최대 5개 레이어를 지원합니다.

관련 도구

CSS 그라디언트 생성기CSS 애니메이션 빌더