CSS阴影生成器

怎么用

1. 从模板或空白开始
   可以先点一个精选模板起步，也可以全部归零从第一层开始调。
2. 调节当前层参数
   拖动 X/Y/模糊/扩展/透明度滑杆，选择颜色，需要内阴影勾选「inset」。
3. 叠加多层
   点「＋ 添加一层」再调下一层；卡片列表里点选切换当前层，「✕」删除该层。
4. 切换预览环境
   用「明/暗背景」切换预览底色、拖「圆角」看不同形状下的阴影表现。
5. 复制代码
   满意后点「📋 复制 CSS」，把 box-shadow 声明粘贴进样式表。

使用技巧

• 柔和高级的卡片阴影公式：y 偏移小、模糊大、透明度低，如 0 8px 24px rgba(0,0,0,.12)。
• 悬浮（hover）效果只需要把 y 偏移和模糊各加大一点，配合 transition 就有「抬起来」的感觉。
• 多层叠加时底层模糊小而实、上层模糊大而虚，层次感立刻出来。
• inset 内阴影配合低透明度可以做出输入框聚焦、卡片按压的凹陷感。
• 纯黑 rgba(0,0,0,1) 阴影几乎总是错的——把透明度压到 .1 ~ .3 更接近真实光照。

更新记录

• v1.0 2026-09-16 首次上线：五参数滑杆可视化调节、多层阴影叠加（最多 6 层）、inset 内阴影、明暗背景与圆角预览、精选阴影模板、一键复制 CSS。

常见问题