🌑CSS box-shadow 그림자 생성기

슬라이더로 box-shadow를 시각적으로 만들고 코드를 복사하세요. 다중 그림자 레이어 지원, 미리보기 즉시 반영.

🔒 브라우저에서 처리✓ 워터마크 없음✓ 가입 불필요

사용 방법

inset 그림자도 가능한가요?+

네. 각 레이어마다 'inset' 토글을 켤 수 있습니다. inset은 안쪽 그림자(들어간 느낌)를 만듭니다.

자연스러운 그림자 팁?+

(1) Y 오프셋만, X는 0, (2) 블러를 오프셋의 2배, (3) 알파 0.1~0.3, (4) 색상은 완전 검은색보다 짙은 회색이 자연스럽습니다.

여러 레이어가 왜 필요해요?+

현실의 빛은 여러 방향에서 옵니다. 가까운 작은 그림자 + 멀리 큰 그림자를 겹치면 자연스러운 입체감.

성능에 영향?+

정적 그림자는 거의 영향 없습니다. 다만 모바일에서 블러 큰 그림자가 많으면 GPU 부하가 늘 수 있어요.

Tailwind CSS 그림자와 비교?+

Tailwind의 shadow-sm/md/lg/xl/2xl은 미리 정해진 공식 그림자 세트입니다. 커스텀 그림자가 필요할 때 이 도구로 만들어 사용하세요.

글자에도 그림자가 되나요?+

box-shadow는 박스용입니다. 글자 그림자는 text-shadow 속성을 별도로 써야 합니다.