CSS box-shadow란 무엇인가요?

CSS box-shadow는 요소 테두리 주변에 그림자 효과를 추가하는 속성입니다. 수평 오프셋, 수직 오프셋, 블러 반경, 스프레드 반경, 색상을 지정할 수 있으며, 복잡한 효과를 위해 여러 그림자를 레이어할 수 있습니다.

내부(inset) 그림자는 어떻게 만드나요?

'inset' 키워드를 box-shadow 속성에 추가합니다. 내부 그림자는 요소 테두리 안쪽에 나타나 눌리거나 들어간 효과를 줍니다. 생성기에서 Inset 옵션을 토글하여 차이를 확인하세요.

네! CSS는 쉼표로 구분된 여러 박스 그림자를 허용합니다. 외부 그림자와 내부 하이라이트를 결합하는 등 복잡한 효과를 만들 수 있습니다. 생성기의 '그림자 추가' 버튼을 사용하세요.

아니요, box-shadow는 레이아웃이나 요소 크기에 영향을 주지 않습니다. 요소 외부에 렌더링되며 주변 요소에 영향을 미치지 않습니다. 스프레드 값으로 그림자 범위를 제어하세요.

글로우 효과는 오프셋 0과 높은 블러를 사용한 컬러 그림자를 사용합니다. 예: box-shadow: 0 0 20px rgba(99, 102, 241, 0.6). 생성기에서 'Glow' 프리셋을 시도해 보세요.

라이브 미리보기로 CSS 박스 그림자를 시각적으로 생성하세요. 오프셋, 블러, 스프레드, 색상, 다중 레이어를 커스터마이즈할 수 있습니다.

미리보기

CSS 출력

box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.18);

수평 오프셋0px

수직 오프셋4px

블러 반경16px

스프레드 반경-2px

색상

불투명도18%

내부

프리셋

라이브 미리보기로 CSS 박스 그림자를 시각적으로 생성하세요. 오프셋, 블러, 스프레드, 색상, 다중 레이어를 커스터마이즈할 수 있습니다.