utilbox
개발자

CSS Box Shadow Generator

슬라이더로 박스 그림자를 조절하고 CSS 코드를 즉시 복사하세요. 여러 그림자 레이어를 쌓을 수 있습니다.

CSS
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
그림자 #1
X 오프셋0px
Y 오프셋8px
흐림 (blur)24px
확산 (spread)0px
투명도15%

사용 방법

  1. 슬라이더로 그림자의 X·Y 위치, 흐림, 확산, 투명도를 조절합니다.
  2. inset을 켜면 안쪽으로 들어가는 그림자가 됩니다.
  3. + 그림자 레이어 추가로 여러 그림자를 겹쳐 깊이감을 표현할 수 있습니다.
  4. 박스·배경 색상을 바꿔 실제 사용 환경에 맞춰 미리보기 하세요.
  5. 완성된 CSS 코드를 복사해 프로젝트에 붙여넣으면 됩니다.