Developer Design Utility
Box Shadow 생성기
카드, 버튼, 모달, 배너에 사용할 CSS box-shadow 값을 실시간으로 조절하고, 자연스러운 SaaS형 그림자 코드와 inline style 예시를 바로 생성할 수 있습니다.
Shadow 설정
그림자의 위치, 흐림 정도, 확산값, 색상과 투명도를 조절해 원하는 깊이감을 만들어보세요.
검정 계열은 자연스러운 카드 그림자, 컬러 계열은 glow 효과에 적합합니다.
Outer는 바깥 그림자, Inset은 요소 안쪽 그림자를 만듭니다.
설정한 그림자 효과가 실시간으로 반영됩니다.
추천 프리셋
카드, 배너, 버튼, 글로우 효과에 자주 사용하는 그림자 조합을 빠르게 적용할 수 있습니다.
기본 카드 그림자
Glow / 강조 효과
특수 그림자
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Box Shadow 생성기는 언제 사용하나요?
카드, 버튼, 모달, 드롭다운, 이미지 박스처럼 화면 위에 떠 있는 느낌을 주고 싶을 때 사용합니다. SaaS 스타일 UI에서는 은은한 그림자를 사용하면 영역 분리와 시각적 깊이감을 자연스럽게 만들 수 있습니다.
box-shadow 값 순서
box-shadow는 일반적으로 X Offset, Y Offset, Blur, Spread, Color 순서로 작성합니다.
- X Offset: 그림자가 좌우로 이동하는 거리
- Y Offset: 그림자가 위아래로 이동하는 거리
- Blur: 그림자가 퍼지고 흐려지는 정도
- Spread: 그림자 크기를 확장하거나 줄이는 값
- Color: 그림자의 색상과 투명도
추천 사용값
- 일반 카드: Y 8px~18px, Blur 24px~48px, Opacity 10%~18%
- SaaS형 큰 카드: Y 16px~24px, Blur 40px~64px, Opacity 14%~22%
- 버튼 hover: Y 4px~8px, Blur 10px~20px, Opacity 12%~20%
- Glow 효과: 컬러 그림자와 Blur 36px 이상 조합
Outer Shadow와 Inset Shadow 차이
Outer Shadow는 요소 바깥쪽에 그림자를 만들어 카드가 떠 있는 느낌을 주고, Inset Shadow는 요소 안쪽으로 그림자를 만들어 눌린 패널이나 입력창 같은 느낌을 줄 수 있습니다.
자연스러운 카드 그림자를 만들려면 어떻게 해야 하나요?
검정 또는 남색 계열 색상을 사용하고 opacity를 10%~20% 정도로 낮게 설정하는 것이 좋습니다. Blur 값은 크게, Spread 값은 0 또는 음수로 두면 부드러운 카드 그림자를 만들 수 있습니다.
Glow 효과는 어떻게 만들 수 있나요?
파란색, 보라색 같은 포인트 컬러를 선택하고 Blur 값을 36px 이상으로 높이면 빛나는 느낌의 glow 효과를 만들 수 있습니다.
그림자가 너무 진하게 보일 때는 어떻게 조절하나요?
Opacity 값을 낮추거나 Blur 값을 높이면 더 부드러운 그림자가 됩니다. 일반 UI에서는 너무 진한 그림자보다 은은한 그림자가 더 안정적으로 보입니다.