无需登录 数据私有 本地保存

多层阴影生成器增强版 - 可添加多个光源

11
0
0
0

多层阴影生成器 · 增强版

模拟多光源环境，可视化创建丰富的 CSS box-shadow 多层叠加效果

1 光源
光源地图
圆点 = 光源位置
16px
光源列表
光源参数
180°
8px
0px
8px
16px
0px
0.15
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
常见问题与知识点

CSS box-shadow 语法：box-shadow: offset-x offset-y blur-radius spread-radius color;。多个阴影用逗号分隔，先定义的显示在上层。例如：box-shadow: 2px 4px 8px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,255,0.1);

每个 box-shadow 层代表一个"光源"投射的阴影。偏移方向暗示光源位置（阴影偏移的反方向）。通过组合不同方向、不同颜色、不同模糊度的阴影层，可以模拟真实的多光源环境，比如主光+环境光+补光的组合。

模糊半径 (blur-radius)：控制阴影边缘的柔和程度，值越大阴影越模糊、越大。默认为0（锐利边缘）。
扩散半径 (spread-radius)：控制阴影的尺寸扩展，正值扩大阴影，负值缩小阴影。默认为0（与元素等大）。

inset 关键字将阴影从外部改为内部，常用于创建凹陷、压印、内发光等效果。例如输入框的聚焦内阴影、按下的按钮效果、或者卡片的内边框光效。内阴影与外阴影可以混合使用，创造丰富的层次。

合理使用（3-5层）影响极小。但过多的高斯模糊阴影（特别是大模糊半径+多层叠加）在滚动或动画时可能引起重绘性能问题。建议：1) 控制阴影层数在5层以内；2) 避免在频繁动画的元素上使用复杂阴影；3) 考虑使用 will-change: box-shadow 优化；4) 对于静态阴影，可以使用 filter: drop-shadow() 作为替代（但语法不同）。

自然阴影的要点：1) 使用半透明黑色（如 rgba(0,0,0,0.1~0.2)）而非纯灰；2) 主光源阴影偏移较小、模糊适中；3) 添加第二层更大模糊的环境光阴影；4) 阴影颜色可微调色温（暖光偏暖棕，冷光偏蓝灰）；5) 参考真实世界中物体离表面越远阴影越模糊的规律。使用本工具的"双光自然"预设可以快速体验。

box-shadow 沿元素矩形边界投射阴影，支持多层、扩散半径和 inset。filter: drop-shadow() 则根据元素的透明轮廓（alpha通道）投射阴影，对不规则形状（如PNG图标、SVG）更真实，但不支持扩散半径和 inset，也不支持多层（需多个filter）。两者可结合使用。
🔧 相关工具