Developer Design Utility
Box Shadow 생성기
카드, 버튼, 모달, 배너에 사용할 CSS box-shadow 값을 실시간으로 조절하고, 자연스러운 SaaS형 그림자 코드와 inline style 예시를 바로 생성할 수 있습니다.
Box Shadow 생성
X/Y 위치, blur, spread, 색상, 투명도를 조절해 그림자를 만들 수 있습니다.
실시간 미리보기
Preview Card에 그림자 효과가 즉시 반영되어 결과를 바로 확인할 수 있습니다.
CSS 코드 복사
생성된 box-shadow 코드를 복사하거나 CSS 파일로 다운로드할 수 있습니다.
Shadow Type
Outer
Offset
0px / 18px
Blur / Spread
48px / 0px
Opacity
18%
STEP 1
Shadow 설정
그림자의 위치, 흐림 정도, 확산값, 색상과 투명도를 조절해 원하는 깊이감을 만들어보세요.
-80px
0px
80px
-80px
18px
80px
0px
48px
120px
-50px
0px
50px
검정 계열은 자연스러운 카드 그림자, 컬러 계열은 glow 효과에 적합합니다.
0%
18%
100%
Outer는 바깥 그림자, Inset은 요소 안쪽 그림자를 만듭니다.
0px
24px
60px
Live Preview
Box Shadow
Preview Card
설정한 그림자 효과가 실시간으로 반영됩니다.
X / Y
0px / 18px
Blur
48px
Opacity
18%
STEP 2
추천 프리셋
카드, 배너, 버튼, 글로우 효과에 자주 사용하는 그림자 조합을 빠르게 적용할 수 있습니다.
기본 카드 그림자
Glow / 강조 효과
특수 그림자
STEP 3
대기 중
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Box Shadow 생성기는 언제 사용하나요?
카드, 버튼, 모달, 드롭다운, 이미지 박스처럼 화면 위에 떠 있는 느낌을 주고 싶을 때 사용합니다. SaaS 스타일 UI에서는 은은한 그림자를 사용하면 영역 분리와 시각적 깊이감을 자연스럽게 만들 수 있습니다.
사용 방법
- 오프셋, Blur, Spread, 색상, 투명도와 Shadow Type을 조절합니다.
- Preview Card에서 그림자의 깊이감과 카드 반경을 실시간으로 확인합니다.
- 추천 프리셋을 적용해 카드, 버튼, Glow, Inset 그림자를 빠르게 비교합니다.
- CSS 코드 생성하기 버튼으로 결과를 만들고 복사하거나 CSS 파일로 다운로드합니다.
자연스러운 카드 그림자를 만들려면 어떻게 해야 하나요?
검정 또는 남색 계열 색상을 사용하고 opacity를 10%~20% 정도로 낮게 설정하는 것이 좋습니다. Blur 값은 크게, Spread 값은 0 또는 음수로 두면 부드러운 카드 그림자를 만들 수 있습니다.
Glow 효과는 어떻게 만들 수 있나요?
파란색, 보라색 같은 포인트 컬러를 선택하고 Blur 값을 36px 이상으로 높이면 빛나는 느낌의 glow 효과를 만들 수 있습니다.
그림자가 너무 진하게 보일 때는 어떻게 조절하나요?
Opacity 값을 낮추거나 Blur 값을 높이면 더 부드러운 그림자가 됩니다. 일반 UI에서는 너무 진한 그림자보다 은은한 그림자가 더 안정적으로 보입니다.