실시간 미리보기를 통해 CSS 박스 그림자를 시각적으로 제작하세요. 오프셋, 블러, 확산, 색상 및 여러 레이어를 자유롭게 조절할 수 있습니다. 바로 사용할 수 있는 CSS 코드를 즉시 복사하세요.
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);CSS의 box-shadow 속성은 요소의 테두리 주변에 그림자 효과를 추가합니다. 그림자는 수평 오프셋, 수직 오프셋, 블러 반경, 확산 반경, 색상 및 선택적 inset 플래그로 정의됩니다. 쉼표로 구분된 여러 개의 그림자를 겹쳐서 레이어 효과를 만들 수 있으며, 이 속성은 벤더 접두사 없이 모든 최신 브라우저에서 지원됩니다.
슬라이더와 색상 선택기를 조정하여 각 그림자 레이어를 설정하세요. 값이 변경되면 미리보기 상자가 실시간으로 업데이트됩니다. 여러 그림자 레이어를 개별적으로 추가하거나 제거할 수 있습니다. 설정이 완료되면 ‘복사’를 클릭하여 스타일시트에 붙여넣을 수 있는 전체 박스 그림자 CSS 값을 준비하세요.
일반적인 패턴을 적용할 때 프리셋을 출발점으로 활용하세요. UI 구성 요소에는 카드 그림자, 모달 창에는 돌출된 그림자, 미묘한 입체감을 주려면 부드러운 그림자, 플랫 디자인의 미학을 살리려면 선명한 그림자를 사용하세요. ‘인셋(inset)’ 옵션을 사용하면 눌린 버튼 상태나 안쪽으로 파인 입력 필드에 유용한 내부 그림자를 만들 수 있습니다.