CSS Box Shadow 생성기

CSS box-shadow 속성을 시각적으로 생성하세요.

미리보기

설정

0px
4px
6px
0px
10%

CSS Box Shadow 생성기 안내

CSS Box Shadow란?

box-shadow는 HTML 요소 주위에 그림자 효과를 만드는 CSS 속성입니다. 카드 UI, 버튼 호버 효과, 모달 팝업 등 웹 디자인 전반에서 깊이감과 입체감을 표현할 때 사용됩니다. 한 요소에 여러 개의 그림자를 쉼표로 구분하여 겹칠 수 있으며, 외부 그림자와 내부(inset) 그림자를 조합해 다채로운 효과를 만들 수 있습니다. 이 생성기를 사용하면 슬라이더 조작만으로 원하는 그림자를 시각적으로 디자인하고, 완성된 CSS 코드를 바로 복사할 수 있습니다. box-shadow 속성은 CSS3 명세에서 도입되었으며, 그 이전에는 이미지를 잘라 붙이거나 별도의 div 레이어를 쌓아야 비슷한 효과를 낼 수 있었습니다. 현재는 모든 주요 브라우저에서 벤더 프리픽스 없이 지원되며, Material Design이나 Apple의 Human Interface Guidelines에서도 그림자를 통한 고도(elevation) 시스템을 권장하고 있어 현대 UI 설계의 핵심 요소로 자리잡았습니다.

동작 방식

box-shadow는 요소의 border-box를 기준으로 그림자를 렌더링합니다. 브라우저는 먼저 요소의 경계 상자와 동일한 크기의 사각형을 생성하고, offset-x와 offset-y만큼 위치를 이동시킵니다. 그런 다음 spread 값에 따라 사각형을 확장하거나 축소하고, 가우시안 블러 알고리즘을 적용하여 blur 값만큼 가장자리를 부드럽게 만듭니다. 예를 들어 box-shadow: 4px 8px 16px -2px rgba(0,0,0,0.15)는 그림자를 오른쪽 4px, 아래쪽 8px 이동시키고, 16px 블러를 적용한 뒤, spread -2px로 전체 크기를 약간 줄여 요소보다 살짝 작은 부드러운 그림자를 만듭니다. inset 키워드를 추가하면 동일한 계산이 요소 내부에서 수행되어 눌린 듯한 효과를 냅니다. 렌더링은 GPU가 처리하므로 일반적인 사용에서는 성능 걱정이 없지만, 애니메이션과 결합할 때는 will-change: box-shadow 선언이 도움이 됩니다.

관련 도구

관련 가이드