레이어
X 오프셋4px
Y 오프셋4px
블러8px
확산0px
%
Inset
CSS box-shadow 생성이란?
CSS box-shadow 생성은 box-shadow 값을 시각적으로 구성하고 CSS를 즉시 복사할 수 있습니다. 오프셋, 블러, 확산, 색상, 불투명도를 실시간 미리보기로 조정하세요.
box-shadow 생성기 사용 방법
- X/Y 오프셋, 블러, 확산 슬라이더를 조정하세요.
- 그림자 색상을 선택하고 불투명도를 설정하세요.
- 내부 그림자 효과를 위해 Inset을 토글하세요.
- 복잡한 그림자를 위해 레이어를 더 추가하세요.
- CSS를 복사해 프로젝트에 붙여넣으세요.
더 알아보기▾
Box Shadow 매개변수
- X/Y 오프셋 —그림자를 가로 및 세로로 이동합니다
- 블러 —그림자 가장자리의 부드러움/흐림 정도입니다
- 확산 —그림자 크기를 확장하거나 축소합니다
- Inset —요소 내부에 그림자를 렌더링합니다
자주 묻는 질문
여러 그림자를 추가할 수 있나요?
예. 'Add Layer'를 클릭해 여러 box-shadow 값을 쌓고, 출력 CSS에서는 쉼표로 결합합니다.
생성된 CSS는 어떻게 사용하나요?
'Copy CSS'를 클릭한 후 box-shadow 속성을 CSS 파일이나 style 블록에 바로 붙여넣으세요.