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로 바꿔보세요. 차이점이 바로 보일 겁니다.

A 블러 반경이 너무 작을 때 발생합니다. 2px 미만이면 레티나 디스플레이에서 거칠게 보입니다. 브라우저는 물리적 픽셀 단위로 그림자를 그리는데, 블러가 부족하면 계단 현상이 생깁니다. 최소 3~4px 블러를 설정하면 부드러워집니다. 이 생성기의 실시간 미리보기에서 확대해서 확인한 후 코드를 복사하세요.

A Chrome, Firefox, Safari와 같은 현대적인 브라우저는 W3C 표준을 따르므로 박스 섀도우가 일관되게 렌더링됩니다. 하지만 구형 Internet Explorer 버전은 이 코드를 인식하지 못해 그림자 효과 자체가 아예 사라집니다. 정확한 흐림 반경을 확인하려면 Chrome 110 버전 이상에서 반드시 테스트해보세요. 만약 완벽한 호환성이 필요하다면, CSS에서 테두리를 활용한 폴백을 설정하는 것이 좋습니다.

A 네 방향 모두에 균일한 글로우가 생깁니다. 방향성 없는 헤일로 효과죠. 부드러운 네온 효과나 포커스 링을 만들 때 쓰는 핵심 기법입니다. 블러를 크게(25px 이상) 잡고 rgba(0,0,0,0.15)처럼 낮은 불투명도의 색상을 쓰면 은은한 앰비언트 섀도가 됩니다. 스프레드 값을 올리면 그림자가 바깥으로 고르게 퍼지면서 두꺼운 테두리처럼 보여요. 같은 설정에서 inset을 켜면 완전히 다른 느낌의 내부 비네트 효과가 나타납니다.