CSS Box Shadow 생성기

기능

슬라이더로 조절

색상 선택기

내부 그림자 전환

여러 레이어 지원

미리보기와 CSS 코드 동시 제공

사용 방법

1. 슬라이더로 그림자를 다듬으세요 — 스테이지의 중성 카드가 실제 결과 그대로를 보여줍니다.

2. 실제 그림자는 여러 층입니다: 최대 4개 레이어를 쌓거나 프리셋(부드럽게 / 떠오른 / 공중에 뜬 / 안쪽 그림자)에서 시작하세요.

3. 배경을 바꿔 흰색·회색·짙은색 위에서 그림자를 확인한 뒤 CSS를 복사하세요.

이 도구에 대하여

인터페이스에서 그럴듯한 그림자는 대개 한 겹이 아닙니다. 닿아 있는 느낌을 주는 진하고 좁은 그림자와 거리감을 주는 넓고 부드러운 그림자가 함께 쓰입니다. 이 생성기는 box-shadow를 최대 네 겹까지 쌓을 수 있으며, 겹마다 가로·세로 오프셋, 흐림, 퍼짐, 색, 불투명도, 안쪽 그림자를 조정하고 무대 위 중립 카드로 정확한 결과를 확인할 수 있습니다. "부드럽게", "떠오른", "공중에 뜬", "안쪽 그림자" 프리셋에서 시작할 수도 있고, 무대를 흰색·회색·어두운 배경으로 바꿔 어느 배경에서도 그림자가 잘 보이는지 점검할 수 있습니다. 생성된 CSS는 겹을 올바른 순서로 rgba 색과 함께 나열하므로 스타일시트나 디자인 토큰 파일에 바로 붙여넣으면 됩니다.

자주 묻는 질문

오프셋, 흐림, 퍼짐은 무엇을 뜻하나요?

X·Y 오프셋은 그림자를 오른쪽과 아래로 옮깁니다(음수는 왼쪽과 위). 흐림은 가장자리를 부드럽게 하며 값이 클수록 퍼져 보입니다. 퍼짐은 흐리게 하기 전에 그림자를 키우거나 줄이므로, 음수 값을 주면 부드러운 그림자를 요소 아래에 숨길 수 있습니다.

그림자를 여러 겹 쓰는 이유는 무엇인가요?

실제 물체는 표면 가까이에 선명한 그림자를, 멀리에는 부드러운 그림자를 드리웁니다. 작고 진한 겹과 크고 옅은 겹을 함께 쓰면 무거운 그림자 하나보다 자연스러워 보이며, 대부분의 디자인 시스템도 이렇게 높이를 표현합니다.

안쪽 그림자(inset)는 무엇에 쓰나요?

inset 그림자는 요소의 테두리 바깥이 아니라 안쪽에 그려져 움푹 들어간 것처럼 보입니다. 입력란, 오목한 영역, 토글 스위치에 자주 쓰입니다.

그림자가 성능에 영향을 주나요?

정적인 그림자는 부담이 거의 없습니다. 많은 요소에서 box-shadow를 애니메이션하면 다시 그리기가 일어날 수 있으니, 호버 효과에는 그림자를 가진 가상 요소의 불투명도를 애니메이션하거나 흐림 값을 적당히 유지하세요.

어두운 배경에서 그림자가 달라 보이는 이유는 무엇인가요?

어두운 그림자는 어두운 표면에서 대비를 잃습니다. 다크 테마에서는 그림자 불투명도를 낮추고, 대신 더 밝은 표면 색이나 은은한 테두리로 높이를 표현하는 경우가 많습니다.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구