DevTulz Online

CSS Box Shadow 생성기

배경

CSS Box Shadow란?

CSS box-shadow 속성은 요소의 프레임 주변에 그림자 효과를 추가합니다. 그림자는 오프셋, 블러, 스프레드, 색상 지정, inset(내부 그림자) 설정이 가능합니다. 쉼표로 구분된 여러 그림자를 겹쳐 풍부한 효과를 만들 수 있습니다. 이 생성기를 사용하면 복잡한 다층 그림자를 시각적으로 구성하고 붙여넣기 가능한 CSS를 클립보드에 복사할 수 있습니다.

Box Shadow 생성기 사용 방법

  1. Offset X/Y, Blur, Spread 슬라이더를 조정하여 그림자의 위치와 형태를 설정하세요.

  2. 색상 스와치를 클릭하여 그림자 색상을 선택하고 Opacity 슬라이더로 투명도를 조절하세요.

  3. 'Inset'을 켜면 내부 발광 또는 눌린 효과를 만들 수 있습니다.

  4. '+ 레이어 추가'를 클릭하여 여러 그림자를 겹쳐 쌓으세요.

  5. 생성된 CSS를 복사하여 스타일시트에 붙여넣으세요.

자주 묻는 질문

box-shadow와 drop-shadow 필터의 차이점은 무엇입니까? box-shadow는 요소의 직사각형 테두리 상자 주위에 그림자를 추가하고 inset 그림자를 지원합니다. CSS filter: drop-shadow()는 요소의 시각적 모양(투명도 포함)에 적용되어 투명한 배경의 PNG처럼 직사각형이 아닌 윤곽선을 따릅니다.

Material Design 카드 높이 효과를 어떻게 만듭니까? 두 개의 box-shadow를 겹쳐 놓습니다: 부드러운 주변 그림자(큰 흐림, 낮은 불투명도, 약간의 spread) 및 키 그림자(더 작은 흐림, 높은 불투명도, 방향 오프셋). 예: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

box-shadow가 페이지 레이아웃에 영향을 줍니까? 아니요. box-shadow는 요소의 크기나 문서 흐름의 위치에 영향을 주지 않습니다. outline과 달리 레이아웃 공간을 차지하지 않으며 다른 요소를 이동시키지 않습니다.

box-shadow를 애니메이션할 수 있습니까? 예. box-shadow는 CSS transitions 및 animations으로 애니메이션할 수 있습니다. 성능상 필요한 경우에만 box-shadow 전환을 선호하십시오. 브라우저는 box-shadow 변경을 transform이나 opacity만큼 효율적으로 GPU 가속화할 수 없습니다.

Keywords: CSS box shadow 생성기, box-shadow CSS, CSS 그림자 도구, CSS drop shadow, inset shadow, 다층 그림자, CSS shadow 온라인