已更新9月 2026
如何使用盒子阴影生成器
- 设置偏移 - X 通常为 0，Y 为正值（光线来自上方）。
- 大量添加模糊和不透明度 - 柔和且微弱的读数就像真实的一样。
- 仅在阴影必须增大/缩小超出元素轮廓时才调整散布。
- 复制 CSS - 并考虑分层，更紧密的阴影以实现真实感。
盒子阴影生成器是什么？
盒子阴影生成器将滑块转换为 box-shadow CSS：水平和垂直偏移、模糊半径、扩散和颜色/不透明度、实时预览 — 四值语法 (box-shadow: 0 4px 12px rgba(0,0,0,0.15))，其数字第一次没人能猜对。
阴影是扁平 UI 表达深度的方式：卡片正如其阴影所暗示的那样，“漂浮”在页面上方。业余阴影和抛光阴影之间的区别几乎总是柔和度——真实的阴影是大模糊、低不透明度并且稍微向下；严酷的黑暗小模糊框尖叫着默认。
关于盒子阴影生成器
拖动滑块 - X/Y 偏移、模糊、扩散、颜色和不透明度 - 实时观看阴影渲染，并在感觉合适时复制 CSS。
始终有效的秘诀：微妙的卡片高度为 0 2px 8px rgba(0,0,0,0.1)；悬停升降将更大的阴影 (0 8px 24px rgba(0,0,0,0.15)) 与微小的translateY 配对；模态/弹出框显着性采用 0 16px 48px rgba(0,0,0,0.2)。物理直觉：更高的高度=更大的Y偏移+更多的模糊+更少的不透明度——光随着距离的增加而传播。彩色阴影（按钮下的品牌色调辉光）来自于将黑色 rgba 替换为低 alpha 下的品牌颜色。
分层是语法支持的优势：两个或三个逗号分隔的阴影（一个紧而暗，一个大而微弱）比任何单个阴影更好地模拟真实光线 - Material Design 的立面图正是以这种方式构建的。
常见问题解答
X 偏移、Y 偏移、模糊半径、散布 — 然后是颜色。 0 4px 12px 0 rgba(0,0,0,.15)：直接向下 4px，软化超过 12px，无尺寸变化，15% 黑色。
太暗和太锐利——两者的默认值。真实的阴影出奇地微弱（8–20% 不透明度）且模糊（模糊 ≥ 2–3× 偏移量）。如有疑问，请将模糊加倍并将不透明度减半。
缩放 Y 偏移并一起模糊，同时降低不透明度：0 2px 4px/.2 较低； 0 12px 32px/.12 浮高。距离会漫射光线——CSS 应该模仿这一点。
一个元素上有多个以逗号分隔的阴影：一个紧密的深色阴影（接触阴影）加上一个大的微弱阴影（环境阴影）。 0 1px 3px rgba(0,0,0,.2)、0 8px 24px rgba(0,0,0,.1) 击败任何单个阴影的真实感。
静态阴影很便宜。对盒子阴影进行动画处理直接强制重新绘制 - 对带有阴影的伪元素设置不透明度动画，或者在阴影停留时变换元素，以实现 60fps 的悬停。