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 설정

그림자의 위치, 흐림 정도, 확산값, 색상과 투명도를 조절해 원하는 깊이감을 만들어보세요.

X Offset

-80px 0px 80px

Y Offset

-80px 18px 80px

Blur

0px 48px 120px

Spread

-50px 0px 50px

Shadow Color

검정 계열은 자연스러운 카드 그림자, 컬러 계열은 glow 효과에 적합합니다.

Opacity

0% 18% 100%

Shadow Type

Outer는 바깥 그림자, Inset은 요소 안쪽 그림자를 만듭니다.

Preview Radius

0px 24px 60px

Live Preview

Box Shadow Preview Card

설정한 그림자 효과가 실시간으로 반영됩니다.

X / Y 0px / 18px

Blur 48px

Opacity 18%

STEP 2

생성 결과

아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.

대기 중

설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.

도움말

Box Shadow 생성기는 언제 사용하나요?

카드, 버튼, 모달, 드롭다운, 이미지 박스처럼 화면 위에 떠 있는 느낌을 주고 싶을 때 사용합니다. SaaS 스타일 UI에서는 은은한 그림자를 사용하면 영역 분리와 시각적 깊이감을 자연스럽게 만들 수 있습니다.

사용 방법

오프셋, Blur, Spread, 색상, 투명도와 Shadow Type을 조절합니다.
Preview Card에서 그림자의 깊이감과 카드 반경을 실시간으로 확인합니다.
추천 프리셋을 적용해 카드, 버튼, Glow, Inset 그림자를 빠르게 비교합니다.
CSS 코드 생성하기 버튼으로 결과를 만들고 복사하거나 CSS 파일로 다운로드합니다.

box-shadow 값 순서 box-shadow는 일반적으로 X Offset, Y Offset, Blur, Spread, Color 순서로 작성합니다.

추천 사용값 일반 카드: Y 8px~18px, Blur 24px~48px, Opacity 10%~18%

Outer Shadow와 Inset Shadow 차이 Outer Shadow는 요소 바깥쪽에 그림자를 만들어 카드가 떠 있는 느낌을 주고, Inset Shadow는 요소 안쪽으로 그림자를 만들어 눌린 패널이나 입력창 같은 느낌을 줄 수 있습니다.

자연스러운 카드 그림자를 만들려면 어떻게 해야 하나요?

검정 또는 남색 계열 색상을 사용하고 opacity를 10%~20% 정도로 낮게 설정하는 것이 좋습니다. Blur 값은 크게, Spread 값은 0 또는 음수로 두면 부드러운 카드 그림자를 만들 수 있습니다.

Glow 효과는 어떻게 만들 수 있나요?

파란색, 보라색 같은 포인트 컬러를 선택하고 Blur 값을 36px 이상으로 높이면 빛나는 느낌의 glow 효과를 만들 수 있습니다.

그림자가 너무 진하게 보일 때는 어떻게 조절하나요?

Opacity 값을 낮추거나 Blur 값을 높이면 더 부드러운 그림자가 됩니다. 일반 UI에서는 너무 진한 그림자보다 은은한 그림자가 더 안정적으로 보입니다.

EDITORIAL GUIDE

box-shadow의 오프셋·블러·스프레드를 층위에 맞게 조절하는 법

그림자는 장식보다 요소의 높이와 겹침 관계를 전달하는 시각 신호에 가깝습니다. 수평·수직 위치, 블러, 스프레드와 불투명도를 각각 이해하면 과한 그림자를 피하고 여러 화면에서도 자연스러운 깊이를 만들 수 있습니다.

작성 · 검토: win-j
최종 검토: 2026년 8월 8일

이런 분께 유용합니다

카드·버튼의 깊이를 조절하는 UI 제작자
box-shadow 인수 순서를 배우는 개발자
디자인 토큰용 그림자 초안을 만드는 디자이너

대표 활용 상황

카드를 배경에서 은은하게 분리할 때
버튼과 팝업의 높이 차이를 시각화할 때
그림자 값과 CSS 코드를 함께 비교할 때

처음부터 결과 확인까지

1
그림자가 이동할 수평·수직 오프셋을 정합니다.
2
블러를 늘려 경계를 부드럽게 만들고 스프레드로 전체 크기를 조절합니다.
3
그림자 색과 불투명도를 배경색 위에서 비교합니다.
4
안쪽 그림자가 필요할 때만 inset 옵션을 선택합니다.
5
미리보기에서 요소 크기와 모서리 곡률을 실제 UI와 비슷하게 맞춥니다.
6
코드를 복사한 뒤 밝은 테마와 어두운 테마에서 모두 확인합니다.

실제 예시 1

은은한 카드 그림자

입력: 0px 8px 24px -8px, 검정 22%
결과: 아래쪽으로 퍼지는 낮은 대비의 그림자

음수 스프레드는 그림자 시작 면적을 줄여 가장자리가 과도하게 진해지는 것을 완화합니다.

실제 예시 2

눌린 입력 영역

입력: 0px 2px 6px 0px, inset
결과: 요소 내부에 표시되는 그림자

inset은 바깥 높이보다 안으로 들어간 표면을 표현할 때 적합합니다.

계산·처리 기준

CSS box-shadow의 순서인 수평 오프셋, 수직 오프셋, 블러 반경, 스프레드 반경, 색상과 선택적 inset을 조합합니다. 블러 반경은 음수가 될 수 없지만 스프레드 반경은 음수를 사용할 수 있습니다.

알아둘 한계

한 번에 한 개의 그림자 레이어만 생성하며 쉼표로 잇는 다중 그림자는 지원하지 않습니다.
큰 블러 영역이나 많은 그림자는 렌더링 비용을 높일 수 있습니다.
색 선택기의 불투명도와 배경색 조합이 모든 테마에서 같은 깊이로 보이지 않습니다.
그림자만으로 포커스·선택 상태를 전달하면 접근성이 떨어질 수 있습니다.

개인정보 처리

그림자 값과 미리보기는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다.

참고 자료

함께 쓰면 좋은 도구

Border Radius 생성기
그림자가 적용될 카드의 모서리 곡률을 조절합니다.
Glassmorphism 생성기
반투명 표면과 그림자를 조합한 CSS를 만듭니다.

자주 묻는 질문

블러 값에 음수를 쓸 수 있나요?

아니요. CSS 규격에서 블러 반경은 0 이상이어야 하며, 크기를 줄이려면 스프레드에 음수를 사용합니다.

그림자가 잘리는 이유는 무엇인가요?

부모 요소의 overflow가 hidden이거나 그림자가 컨테이너 경계 밖으로 나가면 잘릴 수 있습니다.

어두운 테마에도 같은 값을 써도 되나요?

배경 대비가 달라 깊이가 다르게 느껴질 수 있으므로 테마별 색과 불투명도를 따로 검토하는 편이 좋습니다.