CSS 상자 그림자 생성기

box-shadow 선언에는 X 및 Y 오프셋, 흐림, 확산, 색상 및 선택적 삽입 키워드 등 6개의 움직이는 부분이 있으며 이를 올바르게 만드는 유일한 방법은 해당 부분을 보는 것입니다. 이 생성기는 모든 부분을 슬라이더에 배치하고 드래그할 때 미리보기 카드에 결과를 렌더링하므로 하단의 CSS 라인은 항상 사용자가 보고 있는 것과 정확히 일치합니다.

실제 그림자는 단일 레이어인 경우가 거의 없습니다. 레이어 목록을 사용하면 하나의 선언에 최대 4개의 그림자를 쌓을 수 있습니다. 가장자리 정의를 위한 촘촘하고 어두운 선과 높이를 위한 넓고 부드러운 워시 또는 뉴모픽을 정의하는 명암 쌍입니다. 편집할 레이어를 선택하고 필요하지 않은 레이어를 제거하면 결합된 상자 그림자 값이 실시간으로 업데이트됩니다.

어두운 인터페이스에서는 그림자가 매우 다르게 읽혀지며, 검은색에 가까운 페이지의 검은 그림자는 단순히 사라집니다. 미리보기 배경 토글은 밝은 배경과 어두운 배경을 전환하므로 배송 전에 두 테마를 모두 확인할 수 있습니다. 사전 설정 페이지는 사람들이 실제로 검색하는 변형, 즉 부드러운 표고 그림자, 삽입 우물, 2층 뉴모피즘 레시피 및 미묘한 카드 그림자를 다룹니다.

이 사이트의 모든 도구와 마찬가지로 생성기는 무료이며 브라우저에서 완전히 실행됩니다. 업로드나 계정이 없으며 페이지가 로드된 후에도 오프라인으로 계속 작동합니다.