카드 그림자 CSS — 미묘한 상자 그림자 코드
CSS 상자 그림자 코드를 시각적으로 구축합니다. 오프셋, 흐림, 확산, 불투명도가 있는 색상, 삽입 모드 및 실시간 미리 보기가 포함된 최대 4개의 레이어에 대한 슬라이더입니다.
처리 중...
0%
결과
이 페이지에서는 클래식 카드 그림자(아래 2px, 흐림 8px, 검정 불투명도 15%)에 대한 상자 그림자 생성기 사전 설정을 엽니다. 의도적으로 조용합니다. 자신을 알리지 않고 페이지에서 카드를 분리할 수 있을 만큼 조용합니다. 미리보기를 보면 얼마나 조용한지 정확하게 알 수 있습니다.
이 범위는 목록 카드, 드롭다운 메뉴, 팝오버, 마우스 오버 시 테이블 행 등 대부분의 디자인 시스템에서 가장 낮은 고도 단계에 해당합니다. 모달이나 부동 패널에 대해 더 강한 리프트가 필요한 경우 Y 오프셋을 높이고 함께 흐리게 합니다. 광원을 믿을 수 있게 유지하려면 비례적으로 증가해야 합니다.
상자 그림자 선을 구성 요소 스타일에 복사하거나 더 촘촘한 흐림 효과를 사용하여 두 번째 레이어로 복제하여 가장자리 정의를 추가합니다. 이 도구는 무료이며 브라우저에서 완전히 실행됩니다.