CSS 박스 그림자 생성기

이 도구가 하는 일

박스 그림자 생성기로 그림자를 눈으로 보며 디자인하고 완성된 box-shadow 선언을 복사할 수 있습니다. 필요한 만큼 레이어를 겹치고 레이어마다 오프셋, 흐림, 확산, 색상, 불투명도를 설정하거나 안쪽 그림자로 바꾸면 미리보기가 즉시 바뀝니다. 기존 box-shadow 값을 붙여넣어 시각적으로 편집할 수도 있습니다. 모든 작업은 브라우저에서 실행됩니다.

사용 방법

1. 프리셋에서 시작하거나 예시 그림자를 그대로 둡니다.
2. 레이어 버튼으로 편집할 레이어를 고르거나 + 레이어 추가로 하나 더 겹칩니다.
3. 가로 오프셋, 세로 오프셋, 흐림, 확산을 드래그하고 색상을 고른 뒤 불투명도를 낮춰 부드럽게 만듭니다. 안쪽 그림자를 켜면 inset 그림자가 됩니다.
4. 미리보기의 상자 색상, 배경, 모서리 반경을 페이지에 맞춥니다. 이 값들은 미리보기에만 영향을 줍니다.
5. CSS 카드에서 코드를 복사합니다.

아래쪽 box-shadow CSS 상자는 편집할 수 있습니다. 스타일시트나 디자인 도구의 그림자를 붙여넣으면 컨트롤이 읽어 들입니다. rem과 em은 16px 기준으로 px로 변환됩니다.

예시

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

자연스러운 그림자를 위한 팁

• 불투명도는 낮게. 5~25% 검정이 사실적으로 보이고, 진한 그림자는 무거워 보입니다.
• 음수 확산은 큰 흐림이 양옆으로 번지지 않게 해 줍니다. 대부분의 “카드” 그림자가 이 방법을 씁니다.
• 그림자에 색을 더하세요. 배경색이나 브랜드 색을 약간 섞은 그림자는 순수한 회색보다 풍부해 보입니다.
• 빛은 한 방향에서. 모든 레이어의 세로 오프셋을 양수로 두면 광원 방향이 일치합니다.
• 성능. 많은 요소에 큰 흐림을 주면 저사양 휴대폰에서 스크롤이 느려질 수 있습니다. 애니메이션은 그림자 대신 opacity나 transform으로 하세요.