박스 섀도 생성기

비슷한 CSS·디자인

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

?

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

박스 섀도 생성기는 슬라이더로 그림자 효과를 실시간 조절하고 여러 겹의 그림자를 지원하며 Material, Neumorphism, Neon을 포함한 엄선된 프리셋 8종을 제공합니다. CSS를 바로 복사하세요.

조절 가능한 5개 매개변수: X 오프셋(좌/우), Y 오프셋(상/하), 블러 반경(가장자리 부드러움), 확산 반경(전체 크기), 불투명도 — 각각 전용 슬라이더가 있습니다.
다중 레이어 그림자: “그림자 레이어 추가”를 클릭해 여러 그림자를 쌓으세요. 실제 디자인은 더 자연스러운 깊이를 위해 보통 2–3겹을 씁니다(Material Design처럼).
안쪽 그림자(Inset): Inset을 켜면 그림자가 요소 안쪽으로 뒤집혀 눌린 버튼 효과나 움푹 들어간 카드에 좋습니다.
미리보기 배경 3종: 밝음, 어두움, 그라데이션 배경을 전환해 여러 표면에서 그림자가 어떻게 보이는지 확인하세요.
엄선된 프리셋 8종: Flat, Subtle, Card, Material(3겹), Dramatic, Neon Blue, Neumorphism, Inset.
한 번에 CSS 복사: 모든 CSS 파일, Tailwind style prop, 디자인 도구에 붙여넣을 수 있는 완전한 box-shadow: ...; 구문을 얻습니다.

Box Shadow 생성기는 어떤 옵션을 제공하나요?

X/Y 오프셋, 흐림, 확산, 불투명도가 있는 색상, 안쪽 그림자, 여러 겹 쌓기를 제공합니다.

그림자를 여러 개 추가할 수 있나요?

네. “그림자 추가”를 눌러 box-shadow 레이어를 여러 겹 쌓을 수 있습니다.

생성된 CSS는 어떻게 쓰나요?

출력된 CSS를 복사해 스타일시트나 인라인 스타일에 붙여넣으세요.