Soft CSS Box Shadow — 기성 코드
CSS 상자 그림자 코드를 시각적으로 구축합니다. 오프셋, 흐림, 확산, 불투명도가 있는 색상, 삽입 모드 및 실시간 미리 보기가 포함된 최대 4개의 레이어에 대한 슬라이더입니다.
처리 중...
0%
결과
이 페이지에서는 수평 오프셋 없음, 8px 아래, 넉넉한 24px 흐림 및 낮은 12% 검정 불투명도와 같은 부드러운 그림자가 사전 로드된 상자 그림자 생성기를 엽니다. 미리보기 카드는 즉시 렌더링합니다. 슬라이더를 살짝 밀면 CSS 라인이 실시간으로 따라옵니다.
부드러운 그림자는 현대 인터페이스의 핵심입니다. 낮은 불투명도와 결합된 큰 흐림 효과는 뚜렷한 윤곽선을 그리지 않고 카드를 페이지에서 들어올립니다. 이것이 바로 대부분의 디자인 시스템이 초기 평면 디자인의 촘촘하고 어두운 그림자 대신 고도 그림자를 정확히 이 범위로 유지하는 이유입니다.
상자 그림자 선을 스타일시트에 바로 복사하거나, 더 풍부한 높이를 위해 최대 3개의 레이어를 더 쌓을 수 있습니다. 생성기는 전적으로 브라우저에서 실행되며 어디에도 아무것도 업로드되지 않습니다.