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 선언이 도움이 됩니다.

이용 가이드

1. 프리셋 버튼 중 하나를 클릭하여 기본 스타일을 선택합니다.
2. 수평/수직 오프셋 슬라이더로 그림자의 위치를 조정합니다.
3. 블러 반경을 높이면 부드럽고 퍼지는 그림자가 되고, 0으로 하면 날카로운 그림자가 됩니다.
4. 스프레드 값을 양수로 하면 그림자가 커지고, 음수로 하면 작아집니다.
5. 그림자 색상과 투명도를 취향에 맞게 설정합니다.
6. 내부 그림자가 필요하면 inset 체크박스를 활성화합니다.
7. 하단의 CSS 코드를 복사하여 프로젝트에 붙여넣습니다.

핵심 기능

• 실시간 미리보기 - 슬라이더를 움직이면 즉시 그림자 변화를 확인할 수 있습니다.
• 6가지 프리셋 - 은은한, 보통, 큰, 날카로운, 몽환적, 내부 그림자 등 자주 쓰이는 스타일을 원클릭으로 적용합니다.
• 색상 커스텀 - 그림자 색상, 박스 색상, 배경 색상을 자유롭게 변경할 수 있습니다.
• 투명도 조절 - 그림자의 불투명도를 0~100%까지 세밀하게 설정합니다.
• Inset 모드 - 체크박스 하나로 외부 그림자와 내부 그림자를 전환합니다.
• CSS 코드 복사 - 완성된 box-shadow 코드를 클립보드에 바로 복사합니다.

이런 상황에서 유용해요

• 카드 컴포넌트 - 은은한 그림자로 카드가 떠 있는 느낌을 줍니다. offset-y 4px, blur 6px 정도가 적당합니다.
• 버튼 호버 효과 - 마우스를 올렸을 때 그림자를 강화하여 버튼이 올라오는 인터랙션을 만듭니다.
• 모달/팝업 - 큰 블러와 높은 offset으로 배경과 확실히 분리되는 레이어 효과를 줍니다.
• 입력 필드 포커스 - inset 그림자와 색상 그림자를 조합하여 포커스 상태를 표현합니다.

궁금한 점 모음

관련 도구

• 그라디언트 생성기 - CSS 그라디언트 배경을 시각적으로 디자인하고 코드를 복사할 수 있습니다.
• 색상 팔레트 추출기 - 이미지에서 주요 색상을 자동으로 추출하여 디자인에 활용합니다.
• 색상 변환기 - HEX, RGB, HSL 등 다양한 색상 형식을 실시간으로 변환합니다.