Developer Design Utility
Box Shadow 생성기
X/Y 위치, blur, spread, 색상, 투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인할 수 있습니다.
Box Shadow 생성
offset, blur, spread 값을 조절해 그림자 생성
실시간 미리보기
카드 UI에 그림자 효과를 바로 반영
CSS 코드 복사
box-shadow CSS 코드를 바로 복사·저장
Shadow 설정
그림자의 위치, 흐림 정도, 색상과 투명도를 설정하세요.
-80px
0px
80px
-80px
18px
80px
0px
48px
120px
-50px
0px
50px
그림자 색상을 지정합니다.
0%
18%
100%
안쪽 그림자 여부를 선택합니다.
0px
24px
60px
추천 프리셋
Preview
Box Shadow
Preview Card
실시간으로 그림자 효과가 반영됩니다.
X / Y
0px / 18px
Blur
48px
Opacity
18%
생성 결과
아래 코드를 CSS 파일 또는 style 속성에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Box Shadow는 어디에 사용하나요?
카드, 버튼, 모달, 드롭다운, 이미지 박스 등에 깊이감을 주기 위해 사용합니다. SaaS 스타일 UI에서는 은은한 그림자를 사용하면 카드 영역이 더 깔끔하게 분리됩니다.
값의 의미
- X Offset: 그림자가 좌우로 이동하는 거리
- Y Offset: 그림자가 위아래로 이동하는 거리
- Blur: 그림자가 퍼지며 흐려지는 정도
- Spread: 그림자 크기를 확장하거나 줄이는 값
- Opacity: 그림자 투명도
팁
일반 카드 UI에는 opacity를 10~20% 정도로 낮게 두는 것이 자연스럽습니다. 강조 배너나 버튼에는 컬러 그림자를 사용하면 시각적 포인트를 만들 수 있습니다.