网站导航
设计令牌

阴影

针对浅色与深色调整的多层抬升阴影。

本页内容

类

类声明
shadow-<name>box-shadow: var(--shadow-<name>);

shadow-<name> 设置完整的 box-shadow 值。两个阴影类不会合并各自的列表，胜出的声明提供整个阴影。

值

每个令牌保存一份以逗号分隔的原生阴影列表。展开值即可检查每一层。浅色与深色使用相同的偏移、模糊和扩展长度，区别在于 light-dark() 的颜色。

类值
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))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-sm
0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 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 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 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))
shadow-md
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 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))
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))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))
shadow-xl
0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 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)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34))0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 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)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34))
shadow-2xl
0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 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)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34)), 0 64px 64px -32px light-dark(oklch(0% 0 none / .075), oklch(0% 0 none / .38))0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .07)), 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)), 0 32px 32px -16px light-dark(oklch(0% 0 none / .065), oklch(0% 0 none / .34)), 0 64px 64px -32px light-dark(oklch(0% 0 none / .075), oklch(0% 0 none / .38))
shadow-inset
inset 0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06)), inset 0 1px 2px light-dark(oklch(0% 0 none / .06), oklch(0% 0 none / .4))inset 0 0 0 1px light-dark(oklch(0% 0 none / .06), oklch(100% 0 none / .06)), inset 0 1px 2px light-dark(oklch(0% 0 none / .06), oklch(0% 0 none / .4))
比较全部阴影值
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
shadow-inset

阴影改变绘制，不改变布局

shadow-xs 和 shadow-xl 会在同一个盒子周围产生不同的绘制范围，但都不会为阴影预留空间；后续元素的位置与间隙仍保持不变。

阴影绘制不会预留布局空间

表面的几何尺寸完全相同，与下一个元素的间隙都是 16px，只有阴影令牌改变。标尺测量的是盒子之间的间隙，不是阴影的可见边缘。

文字说明
  1. 两列都包含相同表面与后续元素，尺寸、内边距和 16px 的布局间隙完全相同。
  2. 左侧表面使用预设 shadow-xs 令牌。右侧使用 shadow-xl，会在更宽的区域绘制更多层阴影。
  3. 两列的下一个元素都从相同高度开始。盒子阴影不会改变布局使用的尺寸或间距。
  4. 两个阴影都使用实际预设值。颜色随图片的配色方案调整，偏移、模糊和扩展长度则保持不变。间隙标尺是检查用标注。

令牌列表中的第一个阴影绘制在后续阴影之上。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)  }}

另见 主题指令与颜色.