빠른 사용법
세 단계로 확인합니다.
- 1위치·blur·spread를 입력합니다
X/Y -100~100px, blur 0~200px, spread -100~100px 범위에서 그림자 형상을 정합니다.
- 2색상·opacity·inset을 조정합니다
6자리 HEX와 0~1 opacity로 rgba를 만들고 외부 또는 내부 그림자를 선택합니다.
- 3CSS와 실제 레이어를 검수합니다
복사한 box-shadow를 밝은·어두운 배경과 저사양 기기에서 성능·가독성까지 확인합니다.
결과 읽기
그림자는 깊이를 설명해야 하며 장식만 늘리면 계층이 흐려집니다.
offset·blur·spread·opacity를 디자인 토큰으로 제한하고 같은 elevation 역할에는 같은 값을 써야 UI 위계가 일관됩니다.OFFSET위치
X와 Y는 광원 방향과 요소 높이 인상을 결정합니다.
BLUR확산
큰 blur와 spread는 부드럽지만 넓은 repaint 영역을 만들 수 있습니다.
ALPHA투명도
불투명 검정보다 배경에 맞춘 낮은 alpha 색상이 자연스럽고 dark mode는 별도 값이 필요합니다.
vendor prefix는 호환 초안으로 함께 제공하지만 현대 브라우저에서는 표준 box-shadow가 기본입니다. 과도한 큰 그림자는 렌더링 성능과 focus ring 가시성을 해칠 수 있습니다.
이럴 때 유용합니다.
- 카드 elevation 조정
- 버튼 hover 그림자
- inset 입력 필드 시안
함께 확인하세요.
- 큰 blur·다중 shadow 성능 주의
- focus outline을 가리지 않기
- dark mode 별도 검수
자주 묻는 질문
사용 전 알아둘 점
음수 blur를 사용할 수 있나요?
CSS blur radius는 음수가 될 수 없어 도구가 0 미만을 거부합니다.
opacity 0이면 무엇이 보이나요?
완전히 투명해 그림자가 보이지 않지만 CSS 값 자체는 유효합니다.
CSS가 서버에 저장되나요?
아닙니다. 미리보기와 복사는 현재 브라우저에서만 수행합니다.