给图片添加阴影

给图片添加阴影工具能用柔和、可信的阴影把任意图片从页面上托起来——全程在您的浏览器中完成。上传照片、截图、徽标或抠图 PNG，拖动光源设置角度，再调节模糊、扩展、不透明度和颜色。对于透明 PNG，阴影由图片的 Alpha 通道生成，因此产品或贴纸会按自身轮廓而不是矩形投射阴影。可导出带透明背景的 PNG、纯色或渐变背景上的 JPG，或复制对应的 CSS box-shadow 代码。不会上传任何内容——您的图片不会离开您的设备。

构成阴影的三个数值：偏移、模糊和扩展

几乎所有糟糕的阴影，都是把这三个里的某一个弄错了。偏移是阴影被推离主体的距离——它告诉观者光线在哪、物体浮得有多高。模糊是边缘有多柔和：小模糊读作硬、直射光（阳光、闪光灯），大模糊读作漫射光（阴天、柔光箱）。扩展会在应用模糊之前放大或缩小阴影形状，这样就能得到厚重光晕，或略微收进物体下方的阴影。

如何给图片添加阴影

1. 上传图片：将图片拖到上传框，或点按选择一张。不会上传任何内容——文件直接读入您的浏览器。
2. 放置光源：在光源面板上拖动太阳。阴影落在相反一侧，拖得离中心越远，阴影推得越远。方向键也可以。
3. 塑造阴影：选择类型——投影、分层、长阴影或光晕——然后设置模糊、扩展、不透明度和阴影颜色。
4. 选择背景：PNG 可保持透明，或填充纯色或渐变。额外内边距会在结果周围留出呼吸空间。
5. 下载或复制：按原始、一半或 2× 尺寸保存 PNG 或 JPG——或复制生成的 CSS，在网页元素上复用同一阴影。

阴影跟随主体，而不是外框

大多数在线阴影工具会在文件后面画一个矩形。这对照片没问题，但对抠出的产品图、徽标或贴纸就不对了：圆瓶子不该投下方形阴影。本工具读取图片的 Alpha 通道，按真实剪影生成阴影，因此透明区域不会带阴影。上传透明 PNG 时，您会看到一条绿色提示确认这一点。对于普通不透明照片，剪影就是画面矩形——如果设置了圆角，会先圆化。

该用哪种阴影类型？

为什么用百分比，而不是像素

这里的每个滑块都是图片较短边的百分比。9% 的模糊在 400 像素缩略图和 4000 像素照片上看起来一样，因此您喜欢的预设换上更大图片时仍然适用——不用重新计算。工具仍会在模糊滑块旁和 CSS 面板中显示等效像素值，以便您需要真实数字时使用。

做出可信阴影的技巧

我的图片私密吗？

是的。与那些把图片上传到服务器处理的在线编辑器不同，本工具使用 HTML5 canvas 完全在您的网页浏览器中运行。图片不会离开您的设备，不会被存储，也无需创建账户。关闭标签页，图片就消失了。

常见问题

这个阴影工具免费且私密吗？

是的。本工具完全免费，并使用 HTML5 canvas 完全在您的网页浏览器中运行，因此图片绝不会上传到任何服务器，会保留在您自己的设备上。下载的图片没有水印，也无需注册。

阴影会跟随透明 PNG 的形状吗？

会。阴影由图片的 Alpha 通道生成，因此抠出的产品、徽标或贴纸会按自身轮廓投射阴影，而不是矩形。如果是普通不透明照片，剪影就是照片矩形，若设置了圆角则会先圆化。

如何保持背景透明？

将背景设为透明并下载 PNG。只会绘制阴影和主体，之后可以把结果放到任意颜色上。JPG 无法存储透明度，因此导出 JPG 时背景会填充为白色。

模糊和扩展有什么区别？

模糊会柔化阴影边缘，让它在一段距离内逐渐淡出。扩展会在模糊之前放大或缩小阴影形状本身，因此大扩展配小模糊会得到硬边光晕，小扩展配大模糊会得到柔和云团。

为什么我的阴影在图片边缘被裁切了？

阴影需要图片外侧的空间。本工具会根据偏移、模糊和扩展自动添加内边距，您也可以用“额外内边距”滑块再增加一些。如果把 JPG 导出到彩色背景上，阴影就落在这段内边距上。

可以得到同一阴影的 CSS 吗？

可以。CSS 面板会显示可直接粘贴的 box-shadow 和 filter drop-shadow 规则，与当前设置匹配，像素值按您的图片测量。复制后即可让网页元素呈现相同外观，无需导出文件。

更多资源

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Alpha 合成 — 维基百科