ToolzPod

박스 쉐도우 생성기

CSS 박스 쉐도우를 시각적으로 만들고 코드를 복사하세요.

결과

CSS Box Shadow란?

CSS box-shadow 속성은 요소에 그림자 효과를 추가합니다. X/Y 오프셋으로 위치를, 블러로 부드러움을, 확산으로 크기를, 색상으로 투명도를 제어합니다. 카드, 버튼, 모달에 깊이감을 추가하는 데 널리 사용됩니다.

이 Box Shadow 생성기 사용법

  1. X, Y 오프셋, 블러 반경, 확산 값을 조정합니다.
  2. 그림자 색상을 입력합니다 (RGBA 권장).
  3. «생성»을 클릭하면 미리보기와 CSS 코드가 생성됩니다.

자주 묻는 질문

inset 그림자란?

CSS에서 inset 키워드를 추가하면 그림자가 요소 내부에 렌더링됩니다. 눌린 버튼 효과나 내부 글로우를 만드는 데 유용합니다.

여러 그림자를 쌓을 수 있나요?

네. 쉼표로 구분하여 여러 box-shadow 값을 추가할 수 있습니다. 자연스러운 레이어드 그림자 효과를 만들 때 흔히 사용됩니다.

관련 도구