CSS 阴影生成器
阴影参数不用再蒙。拖四个滑块就能看到卡片真实的层级变化，多层叠加、内阴影都能调，满意了直接复制 box-shadow 一行带走。
- 五参数可调：X / Y 偏移、模糊、扩散、颜色，实时渲染。
- 多层叠加：一层不够就加，顺序、内阴影都能改。
- 预设起点：卡片、按钮悬停、浮层、内凹，套上再微调。
调整阴影
本地渲染生成的 CSS
可直接写入样式表常用阴影预设
点一下套用，再按需微调AI 阴影点评
需人机验证让 AI 判断当前阴影的层级是否自然，并给出更贴合场景的参数改法。首次点击会先弹出点选验证码。
阴影参数到底在控制什么
把 box-shadow 理解成「一块被模糊过的影子」，参数就不难记了。
四个长度值
水平偏移与垂直偏移决定影子往哪边落。真实光源在上方，所以 Y 通常是正值（影子向下）；X 保持 0，除非要模拟侧光。模糊半径越大边缘越柔和，但过度模糊会让界面显脏。扩散半径是很多人忽略的参数：正值让影子整体变大，负值让影子收缩，做「贴边阴影」时用它比调模糊更精准。
多层阴影为什么更真实
现实里的影子有本影和半影：靠近物体的一段很实，远处逐渐淡开。做法是叠两层——一层小偏移、小模糊、较高透明度打底，一层大偏移、大模糊、较低透明度铺开。Material Design 的 6 档阴影就是这个思路。
颜色不要用纯黑
rgba(0,0,0,.2) 在浅色界面上会发灰发脏。把阴影色取主色的深色版本，例如蓝色系的阴影用 rgba(37,99,235,.18)，观感会通透很多。
深色模式下阴影几乎失效
深色背景本身很暗，黑色阴影看不见。这时应该换用「背景提亮 + 1px 边框」来表达层级，或者用更大范围的深色阴影配合轻微高光。别把浅色模式的阴影参数直接搬过去。
常见问题
复制后阴影不显示？
检查元素是不是 overflow: hidden 把阴影裁掉了，或者父元素的背景覆盖在上面。另外 border-radius 与 box-shadow 同时存在时，阴影会跟随圆角。
内阴影 inset 常见用途是什么？
做输入框的内凹感、按下状态的凹陷、进度槽、以及图片上方的暗角。内阴影配合大扩散半径时，看起来像四周压暗的效果。
多层阴影性能会不会变差？
静止元素基本无感；但大面积滚动区域、动画里频繁改变阴影会触发重绘。动画场景建议用伪元素承载阴影，只对 transform 与 opacity 做动画。
阴影和边框能同时用吗？
可以，而且推荐：细边框负责界定边界，阴影负责表达层级。深色模式里边框的权重应该更高，阴影更弱。