CSS 박스 섀도 생성기

라이브 미리보기, inset 토글, 정밀 컨트롤로 다중 레이어 CSS box-shadow 값을 생성합니다.

레이어1
라이브 미리보기, inset 토글, 정밀 컨트롤로 다중 레이어 CSS box-shadow 값을 생성합니다.
레이어 설정
레이어 1
px
px
px
px
미리보기
box-shadow 값을 CSS에 복사하세요.
box-shadow
CSS 출력
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

box-shadow란?

라이브 미리보기, inset 토글, 정밀 컨트롤로 다중 레이어 CSS box-shadow 값을 생성합니다.

box-shadow는 요소 뒤(또는 안쪽)에 하나 이상의 그림자를 그리는 CSS 속성입니다.

각 그림자는 가로/세로 오프셋, 블러 반경, 선택적 확산, 알파가 있는 색상으로 구성되며, inset을 추가하면 내부 그림자가 됩니다.

여러 레이어는 쉼표로 구분되며, 섬세한 그림자를 겹쳐 깊이감, 글로우, 또렷한 가장자리를 만들 수 있습니다.

  • 작은 오프셋과 큰 블러로 부드러운 떠 있음 효과.
  • 높은 불투명도와 작은 블러로 더 선명한 가장자리.
  • 외부 그림자와 내부 그림자를 함께 사용해 깊이감 추가.
  • 성능을 위해 레이어 수를 제한하세요.