CSS 도구/박스 그림자 생성기
박스 그림자 생성기
다중 레이어와 실시간 미리보기로 멋진 박스 그림자를 만들어보세요
미리보기
#F8FAFC
그림자 레이어
레이어 1
#0000001a
0px
4px
6px
-1px
레이어 2
#0000001a
0px
2px
4px
-2px
프리셋
Loading...CSS 박스 그림자 가이드
그림자로 깊이와 입체감을 만드는 방법을 알아보세요
박스 그림자란?
CSS box-shadow 속성은 요소 프레임 주위에 그림자 효과를 추가합니다. 쉼표로 구분하여 여러 효과를 설정할 수 있습니다. 박스 그림자는 X/Y 오프셋, 흐림 및 확산 반경, 색상으로 정의됩니다. 깊이감을 만들고, 요소를 강조하며, 디자인에 시각적 흥미를 더합니다.
사용 방법
- 레이어 추가 버튼으로 그림자 레이어 추가
- X/Y 오프셋으로 그림자 위치 조정
- 흐림과 확산으로 부드러움과 크기 제어
- 내부 그림자를 위해 'inset' 토글, CSS 복사
전문가 팁
- 여러 개의 은은한 그림자로 더 사실적인 깊이 효과 연출
- 음수 확산 값으로 더 타이트하고 집중된 그림자 생성
- 외부와 내부 그림자를 결합하여 뉴모피즘 효과 구현
브라우저 지원
box-shadow는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. IE9부터 널리 지원되어 프로덕션 사용에 안전합니다.
자주 묻는 질문
박스 그림자와 드롭 섀도우의 차이점은 무엇인가요?
box-shadow는 요소의 전체 박스(테두리 포함)에 그림자를 적용하며 사각형 형태를 유지합니다. 반면 drop-shadow는 filter 속성의 일부로, 요소의 실제 형태(투명 영역 포함)를 따라 그림자를 만듭니다. PNG 이미지나 불규칙한 형태에는 drop-shadow가 더 적합합니다.
여러 개의 그림자를 어떻게 적용하나요?
CSS에서 여러 그림자는 쉼표로 구분하여 하나의 box-shadow 속성에 선언합니다. 예: 'box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);'. 먼저 선언된 그림자가 위에 표시되며, 여러 레이어를 조합하면 더 사실적인 깊이감을 연출할 수 있습니다.
inset 그림자는 언제 사용하나요?
inset 키워드를 추가하면 그림자가 요소 내부에 표시되어 움푹 들어간 효과를 만듭니다. 입력 필드, 버튼 눌림 상태, 뉴모피즘 디자인에 자주 사용됩니다. 외부 그림자와 내부 그림자를 함께 사용하면 입체적인 UI 요소를 만들 수 있습니다.
그림자 색상은 어떻게 선택해야 하나요?
자연스러운 그림자를 위해 순수한 검정(#000) 대신 투명도가 있는 어두운 색상을 사용하세요. rgba(0, 0, 0, 0.1~0.3) 범위가 일반적입니다. 컬러풀한 디자인에서는 배경색보다 어두운 동일 계열 색상을 사용하면 조화로운 그림자를 만들 수 있습니다.
박스 그림자가 성능에 영향을 주나요?
많은 요소에 복잡한 그림자(특히 큰 blur 값)를 적용하면 렌더링 성능에 영향을 줄 수 있습니다. 스크롤이나 애니메이션 중에 그림자를 변경하는 것은 피하고, 가능하면 will-change 속성을 사용하거나 그림자 이미지를 대신 사용하는 것이 좋습니다.