박스 그림자 생성기

실시간 미리보기를 지원하는 다중 CSS 박스 그림자: 오프셋, 블러, 확산, 색상 및 불투명도를 설정하고 여러 그림자를 쌓아 올린 뒤 CSS를 복사하세요.

생성된 CSS

CSS

box-shadow: none;

위 슬라이더를 조정한 후 그림자 스택에 추가하세요.

활성 그림자

아직 그림자가 없습니다. 슬라이더를 조정한 후 '그림자 스택 추가'를 클릭하세요.

이용 방법

이 박스 그림자 생성기를 사용하면 여러 CSS 박스 그림자 레이어를 시각적으로 구축하고 쌓아 올리며 미리볼 수 있습니다. X 및 Y 오프셋, 블러, 확산, 색상, 불투명도 및 내부 그림자 여부를 설정한 다음 각 레이어를 스택에 추가하여 쉼표로 구분된 하나의 선언으로 결합할 수 있습니다.

단일 그림자 형태
오프셋, 블러, 확산, 색상 및 불투명도를 설정하고 필요시 내부 그림자를 전환하세요.
스택에 추가
동일한 요소에 여러 그림자를 겹쳐 더 깊은 입체감을 표현하세요.
CSS 복사
스택의 모든 레이어가 하나의 box-shadow 선언으로 결합됩니다.

box-shadow 구문

각 그림자 레이어는 최대 5개의 값을 가지며 색상은 마지막에 지정합니다.

box-shadow: offset-x offset-y blur-radius spread-radius color;

그림자를 요소의 테두리 상자 외부가 아닌 내부에 그리려면 오프셋 앞에 inset 키워드를 추가하세요. 여러 레이어는 쉼표로 구분하며, 먼저 나열된 레이어가 맨 위에 렌더링됩니다.

흐림과 확산

흐림 반경: 그림자 가장자리의 부드러움 정도입니다. 값이 클수록 더 넓게 퍼지는 빛 번짐 효과가 생기며, 0은 선명한 가장자리를 만듭니다.
확산 반경: 흐림 효과 적용 전에 그림자 모양을 확장하거나 축소합니다. 양수 값은 그림자를 요소보다 크게 만들고, 음수 값은 작게 만듭니다. 음수 값은 부드럽고 안쪽으로 당겨진 부유 효과를 만들 때 주로 사용됩니다.

입체감을 위한 그림자 중첩

단일한 큰 그림자는 평평해 보이기 쉽습니다. 실제 인터페이스의 그림자는 보통 2~3개의 레이어로 구성됩니다. 요소와 맞닿은 느낌을 주도록 요소 가까이에 좁고 진하며 불투명도가 낮은 그림자를 두고, 주변 깊이를 표현하도록 바깥쪽에 더 크고 부드러우며 불투명도가 더 낮은 그림자를 둡니다. 플로팅 사전 설정은 두 레이어를 겹쳐 이를 보여줍니다.

성능 참고 사항

box-shadow는 하위 요소의 모양이 아닌 적용 대상 요소의 border-radius를 따릅니다. 스크롤되는 요소에 많은 수의 크고 흐린 그림자를 중첩하면 저사양 휴대폰에서 다시 그리는 속도가 느려질 수 있습니다. 이미지나 SVG의 그림자에는 GPU 합성 방식인 filter: drop-shadow()를 대안으로 테스트해 볼 가치가 있습니다.

자주 묻는 질문

사용자 지정 오프셋과 흐림으로 CSS box-shadow를 만들려면 어떻게 하나요?

슬라이더를 사용하여 오프셋 X, 오프셋 Y, 흐림 및 확산 값을 픽셀 단위로 설정하고 그림자 색상과 불투명도를 선택한 다음 그림자 스택에 추가 버튼을 클릭하세요. CSS가 아래에서 즉시 업데이트됩니다. 예를 들어 부드러운 카드 그림자는 box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);와 같이 표시됩니다.

box-shadow에서 흐림과 확산의 차이점은 무엇인가요?

흐림은 그림자 가장자리의 부드러움을 조절하며 값이 높을수록 더 확산된 빛 효과를 만듭니다. 확산은 흐림 처리 전에 그림자를 확장하거나 축소합니다. 양수 확산 값은 그림자를 요소보다 크게 만들고 음수 값은 작게 만듭니다. 흐림 30px과 확산 -10px인 그림자는 단단한 가장자리가 안쪽으로 당겨져 사실적인 떠 있는 효과를 제공합니다.

요소가 눌린 것처럼 보이게 하는 내부 그림자는 어떻게 만들 수 있나요?

그림자 스택에 추가 버튼을 클릭하기 전에 내부 그림자 스위치를 켜세요. 내부 그림자는 요소의 테두리 상자 안에 그려져 요소가 움푹 패거나 눌린 것처럼 보이게 합니다. CSS에는 inset 키워드가 포함됩니다: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.30);

하나의 요소에 여러 개의 box-shadow를 겹칠 수 있나요?

네, 가능합니다. 각 그림자 레이어를 개별적으로 추가하면 도구에서 목록을 유지하고 출력 시 쉼표로 결합합니다. 레이어 중첩은 표준 CSS 기능입니다: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); 여러 레이어를 사용하면 단일 그림자보다 풍부한 깊이감을 표현할 수 있습니다.

box-shadow의 제한 사항은 무엇인가요?

box-shadow는 하위 요소의 border-radius를 반영하지 않으며, 해당 속성이 적용된 요소의 border-radius만 따릅니다. 또한 여러 그림자를 겹친 상태에서 흐림 값이 매우 크면 저사양 스마트폰에서 스크롤 성능이 저하될 수 있으므로, 이미지나 SVG의 그림자에는 더 가벼운 대안으로 filter: drop-shadow()를 사용해 보시는 것을 권장합니다.