Tool Hub

그림자 생성기

box-shadow / filter:drop-shadow 레이어 쌓기 — 라이브 미리보기

여러 그림자 레이어를 쌓아 깊이 효과를 만듭니다. 일반 요소에는 box-shadow (inset·spread 지원), 투명한 도형 (PNG, SVG) 에는 filter:drop-shadow 를 사용하세요. 각 레이어를 조정하면 라이브 미리보기가 업데이트됩니다.

그림자 레이어

미리보기

CSS
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

사용 방법

  1. 분할 제어를 사용하여 box-shadow와 drop-shadow 모드 사이를 선택하세요.
  2. 첫 번째 그림자 레이어에 대해 X 오프셋, Y 오프셋, blur, 확산, 색상을 조정하세요.
  3. '+ 레이어'를 클릭하여 여러 그림자를 쌓고 각각을 독립적으로 구성하세요.
  4. 라이브 그림자 미리보기 상자에서 결합된 효과를 미리보세요.
  5. 생성된 CSS 선언을 출력 섹션에서 복사하여 스타일시트에 붙여넣으세요.

예제

  • offsetY=4, blur=12, 확산=0, 색상=rgba(0,0,0,0.15)를 설정하면 표준 카드 그림자를 생성합니다: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
  • offsetY=1, blur=3, 색상=rgba(0,0,0,0.08)로 두 번째 레이어를 추가하면 material 스타일 UI에서 인기 있는 계층식 깊이 효과가 생성됩니다.

프로덕션 사용 전 출력을 검증하십시오. 보증 없음 — 자세한 내용은 이용약관.