Shadows
그림자 효과(shadow)는 요소에 적용하여 깊이와 현실감을 더하는 효과입니다. 현 디자인에선 text-shadow는 사용하지 않습니다.
Variables
컴포넌트에 대한 구체적인 정의가 없을 경우, 8가지 box-shadow 값을 각 컴포넌트 깊이에 따라 대응하여 사용합니다.
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
| Name | Shadow | View |
|---|---|---|
| --shadow-xs | box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); | |
| --shadow-sm | box-shadow: 0px 1px 3px 0px rgba(10, 13, 18, 0.10), 0px 1px 2px -1px rgba(10, 13, 18, 0.10); | |
| --shadow-md | box-shadow: 0px 2px 4px -2px rgba(10, 13, 18, 0.06), 0px 4px 6px -1px rgba(10, 13, 18, 0.10); | |
| --shadow-lg | box-shadow: 0px 2px 2px -1px rgba(10, 13, 18, 0.04), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08); | |
| --shadow-xl | box-shadow: 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 20px 24px -4px rgba(10, 13, 18, 0.08); | |
| --shadow-2xl | box-shadow: 0px 4px 4px -2px rgba(10, 13, 18, 0.04), 0px 24px 48px -12px rgba(10, 13, 18, 0.18); |