CSS Box Shadow 생성기

box-shadow 선언에는 여섯 가지 변수가 있습니다: X 및 Y 오프셋, 블러, 스프레드, 색상, 그리고 선택적 inset 키워드. 이들을 제대로 잡는 유일한 방법은 직접 눈으로 확인하는 것입니다. 이 생성기는 모든 요소를 슬라이더에 담고, 드래그할 때마다 그 결과를 미리보기 카드에 렌더링합니다. 따라서 하단의 CSS 코드는 언제나 여러분이 보고 있는 그대로입니다.

실제 세상의 그림자는 단일 레이어인 경우가 드뭅니다. 레이어 목록을 사용하면 하나의 선언문에 최대 4개의 그림자를 쌓을 수 있습니다: 가장자리 선명도를 위한 촘촘하고 어두운 선과 입체감을 위한 넓고 부드러운 음영, 또는 뉴모피즘을 정의하는 밝고 어두운 한 쌍의 그림자 등. 레이어를 선택하여 편집하고, 필요 없는 것은 삭제하면, 결합된 box-shadow 값이 실시간으로 업데이트됩니다.

그림자는 어두운 인터페이스에서는 완전히 다르게 읽힙니다. 검은색에 가까운 페이지에서 검은 그림자는 그냥 사라져 버립니다. 미리보기 배경 전환 기능은 배경을 밝은 색과 어두운 색 사이에서 전환하여, 배포 전에 두 테마를 모두 확인할 수 있게 해줍니다. 사전 설정 페이지는 사람들이 실제로 찾는 유형들을 다룹니다: 부드러운 엘리베이션 그림자, 눌려 들어간 효과, 2중 레이어 뉴모피즘 레시피, 그리고 은은한 카드 그림자.

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