NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →CSS 박스 섀도우 생성기 (라이브 미리보기 포함)
여섯 일반 섀도우 프리셋(부드럽기, 카드, 들림, 글로우, 뉴모픽, 인셋). 슬라이더로 모든 매개변수 미세 조정, 결과 라이브 보기, 붙여넣기 준비된 CSS 복사.
관련 도구
작동 방식
다섯 섀도우 매개변수
X 오프셋: 수평 변위. 양수가 섀도우 오른쪽 이동, 음수 왼쪽. 좌상단 태양 조명(일반 UI 가정)에는 작은 양 X가 좌상단에서 빛 시뮬레이션.
Y 오프셋: 수직 변위. 양수가 섀도우 아래 이동, 위 광원 시뮬레이션. 거의 모든 UI 섀도우가 양 Y 사용.
블러 반경: 섀도우 가장자리가 얼마나 부드러운지. 0 = 날카로운 가장자리(드물). 카드와 버튼에 8-30px 일반. 더 높은 값이 몽환적, 부드러운 섀도우.
스프레드: 섀도우 균일하게 확장 또는 축소. 양수 값이 섀도우를 요소보다 크게; 음수는 축소. 음 스프레드와 오프셋 결합이 '들림' 효과 생성.
색상/불투명도: 섀도우는 보통 낮은 불투명도(10-30%) 검정. 컬러 섀도우는 트렌디지만 잘 사용하기 어려움. 배경의 값 범위 일치 — 어두운 UI에 너무 어두운 섀도우 사라짐, 밝은 UI에 너무 밝은 섀도우 대비 부족.
인셋 섀도우
인셋 섀도우는 외부 대신 요소 내부에 그려짐. 사용: 눌림 버튼 상태, 가라앉은 입력 필드, 뉴모픽 '3D 눌림' 효과.
인셋 섀도우는 요소의 테두리 반경 존중하고 오버플로우 무시. 실제 레이아웃 변경 없이 평면 UI 요소에 시각적 깊이 추가에 유용.
뉴모피즘과 '소프트 UI' 트렌드
뉴모피즘(2020-2022 인기)은 두 반대 섀도우 — 하나 밝고 하나 어둠 — 사용해 요소가 같은 색상 배경에서 돌출 보이게 함. 본 '뉴모픽' 프리셋은 단일 어두운 섀도우 보임; 전체 뉴모피즘에는 반대 측에 밝은 인셋 섀도우와 결합: 'inset -8px -8px 20px rgba(255,255,255,0.5), 8px 8px 20px rgba(0,0,0,0.12)'.
참고: 순수 뉴모피즘은 접근성 문제 — 대비 부족이 요소 구별 어렵게 함. 현대 디자인은 드물게 사용, 종종 전통 섀도우와 결합.
자주 묻는 질문
›여러 섀도우 추가 가능?
CSS가 콤마 구분 다중 섀도우 지원: 'box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)'. 본 도구가 한 번에 한 섀도우 생성; 여러 개 수동 결합.
›뉴모픽 효과 만드는 방법?
오른쪽 하단에 어두운 섀도우와 왼쪽 상단에 밝은 섀도우 결합, 둘 다 인셋 또는 둘 다 외부. 예: '8px 8px 20px rgba(0,0,0,0.12), -8px -8px 20px rgba(255,255,255,0.7)'. 본 프리셋은 어두운 절반 표시; 밝은 섀도우 수동 추가.
›블러와 스프레드 차이?
블러는 섀도우의 가장자리 부드럽게(그라디언트 투명도). 스프레드는 섀도우 전체 크기 변경(요소보다 더 크거나 작게). 블러=20 스프레드=0은 요소 크기 부드러운 글로우; 블러=0 스프레드=20은 20px 더 큰 단단한 섀도우.
›왜 본 섀도우 평평해 보임?
낮은 불투명도, 오프셋 없음, 또는 섀도우 색상이 배경에 너무 가까움 가능. 시작점으로 Y=8, 블러=24, 불투명도=0.18 시도 — 그 값들이 대부분 밝은 배경에 보이게 렌더.
›text-shadow에 사용?
거의 — text-shadow가 같은 구문 사용, '스프레드'와 '인셋' 빼고. 복사 후 수동 조정: 'X Y 블러 색상' 가져오기(스프레드와 인셋 버림).
›섀도우 성능?
Box-shadow가 현대 브라우저에서 GPU 가속. 많은 요소에 많은 섀도우가 여전히 스크롤 느리게 가능. 카드와 버튼의 단일 섀도우: 우려 없음.
›섀도우 또는 테두리 사용?
둘 다 용도 있음. 테두리가 더 선명하고 접근성 좋음. 섀도우가 더 부드럽고/들려 보임. 현대 평면-ish UI는 종종 둘 다 사용: 선명도 위해 가는 테두리 + 들림 위해 부드러운 섀도우.
›데이터가 전송되나요?
전송되지 않습니다. 모든 미리보기와 CSS 생성 로컬 실행.
추천 서비스
광고 안내Cloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →