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를 복사하여 스타일시트에 붙여넣으세요.

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