CSS 박스 섀도 생성기
슬라이더를 움직이며 카드에서 결과를 보면서 box-shadow를 만드세요. 최대 6개 레이어를 쌓아 더 부드럽고 사실적인 그림자를 만들고, inset으로 눌린 효과를 주고, 소프트, 플로팅, 글로우, 뉴모피즘 같은 프리셋에서 시작할 수 있습니다. CSS는 클릭 한 번으로 복사됩니다.
px
그림자 레이어px
px
px
px
%
프리셋 사용 방법
- 프리셋을 선택하거나 그림자의 오프셋, 흐림, 확산, 색상, 불투명도를 조절하세요.
- +로 레이어를 추가하고 각 레이어를 선택해 편집하세요. 디자인에 맞게 배경, 박스 색상, 모서리 반경도 바꿀 수 있습니다.
- CSS를 복사하여 요소의 규칙에 붙여넣으세요.
자주 묻는 질문
흐림과 확산은 무엇을 하나요?
흐림은 그림자의 가장자리를 부드럽게 만들며, 0이면 가장자리가 또렷합니다. 확산은 흐림 처리 전에 그림자를 모든 방향으로 키우고, 음수 값이면 줄어들어 크게 흐린 그림자를 요소 아래에 두는 데 도움이 됩니다.
왜 그림자를 여러 레이어로 쌓나요?
실제 그림자는 물체 가까이에서는 진하고 멀어질수록 옅어집니다. 작고 선명한 그림자와 크고 부드러운 그림자를 함께 쓰면 이를 흉내 낼 수 있어 그림자 하나보다 자연스럽습니다. 목록의 첫 번째 레이어가 맨 위에 그려집니다.
box-shadow가 페이지를 느리게 하나요?
일반적인 사용에서는 아닙니다. 많은 요소에 아주 큰 흐림을 쓰거나 그림자 자체를 애니메이션하면 느린 휴대폰에서 성능에 부담이 될 수 있습니다. 애니메이션하려면 그림자가 있는 가상 요소의 불투명도를 바꾸세요.
🏷️ 메타 태그 생성기
🖼️ 오픈 그래프(OG) 태그 생성기
🔗 UTM 링크 생성기
🌈 CSS 그라데이션 생성기