在线 CSS box-shadow 可视化生成器：拖动滑块调整偏移/模糊/扩散/透明度，实时预览，一键复制 box-shadow 代码。支持自定义颜色与 inset 内阴影。
摘要：CSS box-shadow 可视化生成器：滑块调参实时预览，一键复制代码，支持 inset 与自定义颜色。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
使用指南
CSS box-shadow 参数多，靠脑补难调。本工具提供偏移、模糊、扩散、颜色、内外阴影等可视化控制，实时预览并生成 CSS，本地渲染。最终观感仍受背景与圆角影响，请在真实页面再贴一次。
1. 边界
最终观感仍受背景与圆角影响，请在真实页面再贴一次。
2. 怎么验收
用一份已知对错的样例回归：输入固定、选项固定，输出应可预期。把样例留在团队文档。
3. 和相邻工具
本页输出常接到格式化、校验、转换或设计检查工具；保持链路短、每步可回退。
4. 隐私
处理含个人信息或密钥的内容时，即使计算在本地完成，也要留意屏幕分享、录屏与下载文件的二次传播路径。
5. 补充说明与验收
本页计算在浏览器本地完成，不把你的内容当作上传素材；但这不自动等于「可以随便外传」。下载目录、剪贴板与会议投屏同样可能泄漏。
6. 协作与风险控制
与相邻工具衔接时，注意中间格式是否有损、编码是否一致、以及是否需要保留母版以便回退。链路越长，越要在每一步写下「不保证什么」。新人按清单操作，比口头教一遍损耗更小。文档与实现可能短暂不一致：以你屏幕上可见的按钮、下拉与提示为准。发现落差欢迎用真实样例复现后更新说明，避免继续传播过时句子。处理含个人信息、密钥或未发布文案时，用完清理临时文件；不要把调试样例直接贴进公开工单。需要给外部时，先脱敏再导出。
- 先用最小可复现样例确认选项。
- 批量前记录转换前后体积或行数。
- 输出给他人时写明边界与不保证项。
常见问题
逗号分隔多组值即可叠加：box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.15);。本工具生成单组，可手动组合多组实现层次感。
内阴影——阴影画在元素内部，常用于输入框聚焦、按下态。勾选 inset 开关即可对比。
三个高频原因：颜色透明度为 0、模糊和偏移都是 0、或被父元素 overflow 裁剪。先调大模糊半径排查。
最终观感受背景色与圆角影响：同一组阴影在深浅背景、不同圆角下差异明显。复制 CSS 后回到真实页面，在深色与浅色背景下各检查一遍再定稿。
视觉上更柔和，但过大的模糊半径在低端设备上有渲染开销，滚动与动画密集的场景要节制；另外内阴影和边框别重复表达同一条边界。