UI 그림자 스케일 생성기
그림자 값을 설정하고 단계별 미리보기를 확인한 뒤 UI용 CSS 토큰을 복사하세요.
컨트롤을 조정하면 스케일이 업데이트됩니다.
디자인 보조용: 접근성이나 시각 품질을 보장하지 않습니다. 제품에서 토큰을 확인하세요.
사용 방법
사용 방법
- 기본 색상, 흐림, 확산, 불투명도와 단계 수를 선택합니다.
- 겹친 미리보기와 생성된 토큰을 확인합니다.
- CSS를 복사하고 실제 배경, 대비와 상태에서 각 단계를 확인합니다.
시각 디자인 시작점
오프셋, 흐림과 불투명도가 증가하는 box-shadow를 생성합니다. 실제 표면과 컴포넌트에 맞게 조정하세요.
로컬에서 복사 가능
계산과 미리보기는 이 브라우저에서 처리되며 CSS 사용자 지정 속성으로 출력됩니다.
디자인 보조용
이 미리보기는 접근성, 대비, 시각 품질 또는 모든 배경에 대한 적합성을 보장하지 않습니다. 중요한 상태에는 그림자 외의 단서도 제공하세요.
자주 묻는 질문
더 알아보기
단계는 어떻게 증가하나요?
각 단계에서 수직 오프셋, 흐림과 불투명도가 증가합니다.
그림자만으로 접근성을 보장하나요?
아니요. 그림자는 디자인 보조일 뿐입니다. 중요한 상태에는 텍스트, 테두리, 색상 등을 함께 사용하세요.
입력이 업로드되나요?
아니요. 미리보기와 CSS는 이 브라우저에서 로컬로 생성됩니다.