CSS Box Shadow 생성기 무료 온라인: 박스 그림자 시각적 생성

A 컨트롤 조절: X/Y 오프셋(방향), blur(확산), spread(확장), 색상과 불투명도. 실시간 업데이트.

A 그림자가 바깥이 아닌 안쪽으로. 깊이 효과.

A 네, CSS 코드가 표시되고 클릭으로 복사.

A 가능합니다. 단, opacity나 color만 애니메이션 해야 합니다. 위치 값(offset, blur)을 움직이면 브라우저가 매 프레임마다 레이아웃을 다시 계산합니다. 모바일에서 성능이 급격히 떨어져요. opacity 전환을 쓰거나 가상 요소로 대체하는 게 낫습니다. 이 생성기의 실시간 미리보기로 먼저 테스트해보세요.

A 네, 쉼표로 구분해서 여러 그림자를 쌓을 수 있습니다. "그림자 추가" 버튼을 눌러 레이어를 늘리세요. 예를 들어 두 그림자의 오프셋을 다르게 설정하면 카드가 떠 있는 효과를 만들 수 있습니다 — 하나는 부드럽고 깊게, 다른 하나는 날카롭게. 라이브 미리보기에서 모든 레이어를 즉시 확인하세요.

A 네, 서로 대체할 수 없습니다. box-shadow는 요소의 경계 상자를 따라 직사각형 그림자를 만듭니다 — 모서리까지 모두 포함해서요. 반면 filter: drop-shadow는 콘텐츠의 실제 모양을 따라갑니다. 투명 PNG에 불규칙한 가장자리가 있다면 drop-shadow가 그 형태에 딱 맞는 그림자를 만들어줍니다. 카드, 버튼, UI 구성 요소에는 box-shadow를 사용하세요. 로고나 오려낸 이미지에는 drop-shadow를 쓰는 게 좋습니다. 여기서 테스트해보세요: 원형 요소에 box-shadow를 적용한 다음 CSS에서 drop-shadow로 바꿔보세요. 차이점이 바로 보일 겁니다.