토큰
그림자
라이트와 다크에 맞게 조정한 여러 겹의 입체 그림자입니다.
이 페이지의 내용
클래스
| 클래스 | 선언 |
|---|---|
shadow-<name> | box-shadow: var(--shadow-<name>); |
shadow-<name>은 전체 box-shadow 값을 설정합니다. 두 그림자 클래스의 목록은 이어 붙지 않으며 우선하는 선언이 그림자 전체를 결정합니다.
값
각 토큰은 쉼표로 구분된 네이티브 그림자 목록을 저장합니다. 값을 펼치면 모든 겹을 확인할 수 있습니다. 라이트와 다크는 오프셋, 흐림, 확산 길이가 같으며 light-dark()의 색상만 다릅니다.
| 클래스 | 값 |
|---|---|
shadow-xs |
|
shadow-sm |
|
shadow-md |
|
shadow-lg |
|
shadow-xl |
|
shadow-2xl |
|
shadow-inset |
|
모든 그림자 값 비교
shadow-xsshadow-smshadow-mdshadow-lgshadow-xlshadow-2xlshadow-inset그림자는 그리기를 바꾸며 레이아웃은 바꾸지 않습니다
shadow-xs와 shadow-xl은 같은 상자 주변에 서로 다른 크기의 그림자를 그립니다. 어느 쪽도 그림자를 위한 공간을 확보하지 않으므로 다음 요소의 위치와 간격은 그대로 유지됩니다.
그림자는 레이아웃 공간을 확보하지 않습니다
표면의 기하 형태와 크기, 다음 요소까지의 16px 간격은 같고 그림자 토큰만 바뀝니다. 눈금은 보이는 그림자 가장자리가 아니라 상자 사이의 간격을 측정합니다.
텍스트 설명
- 두 열은 같은 표면과 다음 요소를 포함합니다. 크기, padding, 16px의 레이아웃 간격이 모두 같습니다.
- 왼쪽 표면은 프리셋 shadow-xs 토큰을 사용합니다. 오른쪽은 shadow-xl을 사용해 더 넓은 영역에 더 많은 겹을 그립니다.
- 다음 요소는 두 열에서 같은 높이부터 시작합니다. 상자 그림자는 레이아웃에 쓰이는 크기나 간격을 바꾸지 않습니다.
- 두 그림자는 실제 프리셋 값을 사용합니다. 색상은 이미지의 색 구성표에 맞춰 바뀌지만 오프셋, 흐림, 확산 길이는 그대로입니다. 간격 눈금은 확인용 주석입니다.
토큰 목록의 첫 그림자는 뒤따르는 그림자 위에 그려집니다. shadow-inset은 안쪽 그림자를, 여섯 크기 단계는 바깥쪽 그림자를 사용합니다. 이 토큰들은 표면 색상, 모서리 반경, 쌓임 순서, 잘라 내기 정책을 지정하지 않습니다.
요소가 사용하는 색 구성표가 각 light-dark() 색상을 선택합니다. 따라서 그림자의 길이를 바꾸거나 다른 유틸리티 클래스를 추가하지 않고도 그리기 결과를 바꿀 수 있습니다. 로컬 색 구성표 선택은 색상 역할을 참고하세요.
그림자를 제거하려면 네이티브 선언 (box-shadow:none)을 사용하세요. 안쪽 그림자와 바깥쪽 그림자를 결합하려면 두 목록을 모두 담은 토큰 하나를 정의하세요. 별도의 클래스는 목록을 합치지 않습니다.
관련 문서: 색상 역할, 네이티브 그림자 그리기와 레이아웃.
사용 예
기본 표면은 낮게 유지하고 그 위에 떠 있는 요소만 높입니다.
Card
On the page
- Duplicate
- Rename
- Archive
<div> <article class="… shadow-xs"> <p>Card</p> <p>On the page</p> </article> <ul class="… shadow-lg"> <li>Duplicate</li> <li>Rename</li> <li>Archive</li> </ul></div>생성된 CSS
@layer theme { :root, :host { --shadow-xs: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .04)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)); --shadow-lg: 0 0 0 1px light-dark(oklch(0% 0 none / .05), oklch(100% 0 none / .06)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24)), 0 8px 8px -4px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .26)), 0 16px 16px -8px light-dark(oklch(0% 0 none / .055), oklch(0% 0 none / .3)) }}@layer utilities { .shadow-lg { box-shadow: var(--shadow-lg) } .shadow-xs { box-shadow: var(--shadow-xs) }}사용자 정의
프리셋 값을 변경하거나 토큰을 추가하세요. --shadow-card를 정의하면 shadow-card가 생성됩니다.
@theme { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5));}생성된 CSS
@layer theme { :root, :host { --shadow-card: 0 1px 2px light-dark(oklch(0% 0 none / .08), oklch(0% 0 none / .4)), 0 12px 24px -12px light-dark(oklch(0% 0 none / .2), oklch(0% 0 none / .5)) }}@layer utilities { .shadow-card { box-shadow: var(--shadow-card) }}