Box Shadow Generator

CSS box shadow를 시각적으로 디자인하고 실시간 미리보기로 확인해요. 여러 개의 레이어를 추가하고, offset, blur, spread를 조정한 후 코드를 복사하세요. 모든 작업이 브라우저에서 완료돼요.

작동 방식: 그림자 레이어를 추가하고, offset, blur, spread, 색상을 조정한 후 CSS를 복사하세요. 미리보기가 실시간으로 업데이트돼요. 복잡한 효과를 위해 여러 개의 그림자를 겹칠 수 있어요. 어떤 데이터도 서버로 전송되지 않아요.

Shadow 1
0
4
6
-1
10%
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);

CSS box-shadow란?

CSS box-shadow 속성은 요소의 프레임에 하나 이상의 그림자 효과를 추가해요. 그림자는 박스 외부(기본값) 또는 내부(inset)에 배치될 수 있어요. 일반적으로 깊이감을 표현하고, 카드를 배경 위에 떠 있도록 표현하며, 호버 상태의 인터랙티브 요소를 강조하고, 현실감 있는 다층 인터페이스를 구성할 때 사용돼요. 이미지와 달리 box shadow는 브라우저가 어떤 해상도에서든 추가 요청 없이 렌더링해요.

Box Shadow 문법 설명

box-shadow 단축 속성은 offset-x, offset-y, blur-radius, spread-radius, color, 그리고 선택적인 inset 키워드 순서로 값을 받아요. Offset-x는 그림자를 수평으로 이동시키고(양수 = 오른쪽), offset-y는 수직으로 이동시켜요(양수 = 아래). Blur-radius는 가장자리를 부드럽게 만들어요 — 값이 클수록 더 흐릿한 그림자가 돼요. Spread-radius는 blur 전에 그림자 크기를 늘리거나 줄여요. Color는 rgba() 같은 투명도를 포함한 모든 CSS 색상이 가능해요. inset 키워드를 추가하면 그림자가 요소 내부에 렌더링돼요.

여러 개의 그림자

CSS는 단일 속성에서 쉼표로 구분된 그림자 선언을 허용해서 복잡한 다층 효과를 만들 수 있어요. 디자이너들은 현실적인 조명을 시뮬레이션하기 위해 그림자를 여러 개 겹쳐요 — 접촉 깊이를 위한 어두운 타이트한 그림자와 주변 빛을 위한 큰 소프트 그림자를 조합해요. 두 세 개의 그림자를 겹치면 자연스럽고 세련된 결과를 얻을 수 있어요. 성능을 고려해야 해요: 각 그림자는 추가 페인팅을 유발하므로, 자주 애니메이션되는 요소에는 4~5개 이상의 그림자를 쌓지 않는 게 좋아요.

Box Shadow 팁

  • rgba() 또는 hsla() 색상을 사용해서 그림자가 어떤 배경과도 자연스럽게 어울리도록 해요
  • 모바일에서는 40px 이상의 blur 값을 피하세요 — 큰 그림자는 스크롤 성능을 해칠 수 있어요
  • 작고 타이트한 그림자와 크고 부드러운 그림자를 조합해서 현실적인 elevation을 만들어요
  • inset 그림자를 버튼 눌림 효과와 내부 glow에 사용하세요
  • drop shadow는 spread를 0으로 유지하면 가장 자연스러워요
  • 밝은 배경과 어두운 배경 모두에서 그림자를 테스트해서 명도 대비를 확인하세요