이런 분께 유용합니다
- 카드·버튼의 깊이를 조절하는 UI 제작자
- box-shadow 인수 순서를 배우는 개발자
- 디자인 토큰용 그림자 초안을 만드는 디자이너
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의 오프셋·블러·스프레드를 층위에 맞게 조절하는 법
그림자는 장식보다 요소의 높이와 겹침 관계를 전달하는 시각 신호에 가깝습니다. 수평·수직 위치, 블러, 스프레드와 불투명도를 각각 이해하면 과한 그림자를 피하고 여러 화면에서도 자연스러운 깊이를 만들 수 있습니다.
대표 활용 상황
- 카드를 배경에서 은은하게 분리할 때
- 버튼과 팝업의 높이 차이를 시각화할 때
- 그림자 값과 CSS 코드를 함께 비교할 때
처음부터 결과 확인까지
- 1
그림자가 이동할 수평·수직 오프셋을 정합니다.
- 2
블러를 늘려 경계를 부드럽게 만들고 스프레드로 전체 크기를 조절합니다.
- 3
그림자 색과 불투명도를 배경색 위에서 비교합니다.
- 4
안쪽 그림자가 필요할 때만 inset 옵션을 선택합니다.
- 5
고정된 미리보기에서 모서리 반경을 조정하고 CSS를 생성합니다. 이후 설정 변경은 생성 코드에도 반영됩니다.
- 6
코드를 복사한 뒤 밝은 테마와 어두운 테마에서 모두 확인합니다.
은은한 카드 그림자
- 입력
- X 0 / Y 8 / blur 24 / spread -8 / #000000 / 불투명도 22% / 바깥
- 결과
- box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.22);
음수 스프레드는 그림자 영역을 줄이고 블러는 경계를 부드럽게 만듭니다.
안쪽 그림자
- 입력
- X 0 / Y 2 / blur 6 / spread 0 / #000000 / 불투명도 20% / inset
- 결과
- box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
요소 안쪽에 그림자를 그립니다.
계산·처리 기준
CSS box-shadow의 순서인 수평 오프셋, 수직 오프셋, 블러 반경, 스프레드 반경, 색상과 선택적 inset을 조합합니다. 블러 반경은 음수가 될 수 없지만 스프레드 반경은 음수를 사용할 수 있습니다. 색상은 #RGB 또는 #RRGGBB를 받습니다. .shadow-box 규칙에는 미리보기의 border-radius도 포함되고 inline HTML 예시는 CSS 주석 안에 출력합니다.
알아둘 한계
- 한 번에 한 개의 그림자 레이어만 생성하며 쉼표로 잇는 다중 그림자는 지원하지 않습니다.
- 큰 블러 영역이나 많은 그림자는 렌더링 비용을 높일 수 있습니다.
- 색 선택기의 불투명도와 배경색 조합이 모든 테마에서 같은 깊이로 보이지 않습니다.
- 그림자만으로 포커스·선택 상태를 전달하면 접근성이 떨어질 수 있습니다.
개인정보 처리
그림자 값과 미리보기는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- Border Radius 생성기
그림자가 적용될 카드의 모서리 곡률을 조절합니다.
- Glassmorphism 생성기
반투명 표면과 그림자를 조합한 CSS를 만듭니다.
자주 묻는 질문
블러 값에 음수를 쓸 수 있나요?
아니요. CSS 규격에서 블러 반경은 0 이상이어야 하며, 크기를 줄이려면 스프레드에 음수를 사용합니다.
그림자가 잘리는 이유는 무엇인가요?
부모 요소의 overflow가 hidden이거나 그림자가 컨테이너 경계 밖으로 나가면 잘릴 수 있습니다.
어두운 테마에도 같은 값을 써도 되나요?
배경 대비가 달라 깊이가 다르게 느껴질 수 있으므로 테마별 색과 불투명도를 따로 검토하는 편이 좋습니다.
색상이 잘못되면 이전 코드를 복사할 수 있나요?
아니요. 잘못된 HEX 입력은 내보낼 결과를 비웁니다. 색상을 수정하면 현재 설정으로 다시 생성됩니다.