阴影设置
当前编辑层
当前使用两层中阴影，第一层在上方。
卡片预览
有层次，也有留白
调整阴影，让卡片自然地浮出背景。
卡片示例阴影声明
box-shadow: 0px 4px 8px -2px rgba(23, 43, 70, 0.12), 0px 16px 32px -8px rgba(23, 43, 70, 0.2);
预览背景与圆角样式
.preview { background: #F1F5FA; }
.card { background: #FFFFFF; border-radius: 16px; }参数速查
偏移：正值向右、向下，负值反向。模糊：越大越柔和。扩散：正值扩大，负值收缩。内阴影：向卡片内部绘制。
支持 1–5 层，每次只编辑选中的一层。背景色与圆角仅影响预览，不混入阴影声明。
阴影生成器
调整阴影的偏移、模糊、扩散、颜色与透明度，叠加多层外阴影或内阴影，实时预览并复制 box-shadow 代码，支持下载 CSS 与参数，方便设计卡片效果。
整理：喜爱工具箱 · 更新于 。预设为自有示例；规则参考 MDN box-shadow。请结合目标页面背景核对最终效果。
使用说明
三步完成操作
- 01 · 选择起点
从轻、中、重预设开始，或直接调整当前阴影层。
- 02 · 调整层次
设置偏移、模糊和扩散，添加阴影层并用按钮调整叠放顺序。
- 03 · 使用样式
预览卡片效果，复制阴影声明，或下载 CSS 与参数 JSON。
常见问题
使用前先了解这些
模糊和扩散有什么区别？
模糊决定边缘柔和程度，不能为负；扩散改变阴影的整体范围，负值会收缩。
为什么顺序会影响多层阴影？
多层 box-shadow 按声明顺序叠放，列表第一层位于后续阴影上方。可用上移、下移按钮比较。
背景和圆角也会一起导出吗？
阴影声明单独输出；背景和圆角在预览样式中另外列出。JSON 包含所有参数，方便记录。
不同页面的效果会一样吗？
颜色、背景、卡片尺寸和圆角会影响观感。请在目标页面再次核对，尤其是透明阴影与内阴影。