Box Shadow 生成器
可视化调节偏移、模糊、扩展与颜色，生成多层 CSS 阴影代码。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传CSS阴影box-shadow样式生成
阴影层
列表顺序即绘制顺序，第一层在最上层，可拖拽排序。
参数
请先在左侧选择一个阴影层。
实时预览
CSS 代码
🔒 全部在浏览器本地完成，数据不会上传
预设库
点击任意预设即可载入，载入后可继续逐层微调。
历史记录
暂无历史记录。点击下方「保存当前阴影」后会记录在本地，可随时回放。
配置导出 / 导入
配置为本地生成的 JSON，包含全部阴影层与预览设置，不会上传。
工作原理
- 1内部以「阴影层数组」为状态，每层序列化为 `[inset] offsetX offsetY blur spread rgba(...)` 片段，再以逗号连接成 box-shadow 值。
- 2数组顺序即绘制顺序（第一层在最上层），因此拖拽排序会改变最终视觉效果；被临时禁用的层保留参数但不参与输出。
- 3颜色以 RGB 存储、透明度单独作为 alpha，输出 rgba() 而非用 opacity 模拟，避免元素整体变透明。
- 4随机生成限定在合理区间（偏移 ±24px、模糊 0~48px、扩展 -8~12px、透明度 0.08~0.45），避免出现不可用的极端值。
- 5切换预览元素的尺寸 / 圆角 / 背景只影响预览容器，不进入输出代码；预览底衬固定底色，保证在深色模式下也能准确判断阴影。
常见问题
复制的 CSS 和预览效果一致吗？
一致。复制输出的就是预览元素当前应用的 box-shadow 值，粘贴到任意页面即可得到相同效果。若你是把「仅 box-shadow 值」粘贴到自己的规则里，请确保目标元素没有其它会遮挡阴影的属性（如 overflow: hidden 或过小的容器）。
spread（扩展）为负数是什么效果？
spread 为负时，阴影会向内收缩，使阴影比元素本身更小，常用于让阴影看起来更「收紧」而不外扩。这是 CSS 的正常行为，不是错误。
多层阴影的顺序有影响吗？
有。box-shadow 中第一个阴影绘制在最上层，后续依次向下层叠。本工具左侧列表的顺序即绘制顺序，可拖拽调整；列表顶部对应输出中的第一层。
为什么预览区域在深色模式下底色不变？
为了让你准确判断阴影效果，预览底衬固定使用浅色 / 深色 / 棋盘格三种真实底色，不跟随站点主题变化。否则深色模式下浅色阴影会「消失」，产生误判。
历史记录和配置会保存到哪里？
历史记录保存在你浏览器的 localStorage 中，最多保留 50 条，不会上传到任何服务器。清除浏览器数据或更换设备后会丢失；需要长期保存请使用「导出配置」下载 JSON 文件。
数据会上传吗？
不会。所有计算、渲染与导出都在浏览器本地完成，不发起任何网络请求，断网也能正常使用。