CSS 박스 섀도 생성기
기기에서 실행되며 아무것도 전송되지 않습니다.모든 작업이 브라우저에서 이루어지며 아무것도 전송되지 않습니다.
시작점
레이어
가로 이동
세로 이동
흐림
퍼짐
색상
코드
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]기존 그림자 편집
레이어, inset, 부드러운 프리셋으로 CSS 그림자를 만들고 실시간으로 확인한 뒤 CSS나 Tailwind 클래스로 복사하세요. 기존 그림자를 붙여 넣어 편집할 수도 있습니다.
숫자를 짐작하지 말고 눈으로 보면서 원하는 그림자를 만드세요. 부드럽게, 보통, 선명한 레트로, 부드러운 다중 레이어, 떠 있는, 안쪽, 뉴모피즘, 글로우 프리셋 중 하나로 시작한 뒤 각 레이어의 이동, 흐림, 퍼짐, 색상, 불투명도, inset을 조정하면 끌 때마다 미리보기가 바뀝니다. 그림자는 최대 8개 레이어까지 쌓을 수 있고, 가장 자연스러운 그림자는 이렇게 만듭니다. 결과는 CSS나 Tailwind 클래스로 복사하거나 링크로 공유하고, 스타일시트의 box-shadow를 붙여 넣어 이어서 작업할 수도 있습니다.
자주 묻는 질문
흐림과 퍼짐은 무엇을 하나요?
흐림은 그림자 가장자리를 부드럽게 합니다. 0은 선명한 선이고, 값이 클수록 더 많은 픽셀에 걸쳐 옅어집니다. 퍼짐은 흐리기 전에 그림자를 키우거나(양수) 줄입니다(음수). 작은 음수 퍼짐과 큰 흐림을 함께 쓰면 요즘 UI에서 흔한 부드럽게 안으로 모인 그림자가 됩니다.
왜 여러 레이어를 쓰나요?
실제 그림자는 물체 가까이에서는 진하고 선명하며, 멀어질수록 옅고 부드러워집니다. 레이어 하나로는 둘 다 표현할 수 없어서, '부드러운 다중 레이어' 프리셋처럼 이동과 흐림이 두 배씩 커지는 레이어를 겹치면 훨씬 자연스럽습니다.
inset 그림자란?
inset 그림자는 박스 바깥이 아니라 안쪽에 그려져 박스가 눌린 것처럼 보입니다. 입력창, 오목한 영역, 눌린 버튼에 유용하며, 한 그림자 안에서 안쪽과 바깥쪽 레이어를 섞을 수 있습니다.
box-shadow가 페이지를 느리게 하나요?
그림자 몇 개는 부담이 거의 없습니다. 많은 요소에 아주 큰 흐림을 주거나 box-shadow 자체를 애니메이션하면 느린 휴대폰에서 프레임이 떨어질 수 있습니다. 애니메이션에는 이미 그림자가 있는 의사 요소의 불투명도를 바꾸는 방법을 쓰세요.