阴影具象化工作台 Shadow Playground

直观解构:偏移距离、模糊半径、边缘虚化过渡

画布底色:
拟态等效光源

投影目标实体

拖动右侧控制面板,直观体验虚实边缘与景深跃迁

高度隐喻:中层悬浮
边缘虚化宽度 (Penumbra) 柔和
20 px

高斯衰减过渡带,形成柔软半影

矢量位移与投影距离 中度悬浮
10.0 px

模拟物体距离背景层高度约 4~8mm

光源入射方位角 斜上方
90° (垂直正下)

偏角决定了视觉重心与光线来源感知

阴影核心几何参数

0px
-100px (偏左) 0px (居中) +100px (偏右)
10px
-100px (偏上) 0px +100px (下落)
20px
0px (完全硬边) 20px (柔和) 100px (极限弥散)
0px
-50px (内缩) 0px (等比) +50px (外延膨胀)
内阴影模式 (Inset)

反转投影至实体内部,呈现凹陷/内嵌立体感

色彩与透明度

40%
快捷色:

卡片形态调整

16px
256px
生成 CSS 规则
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.4);