免费在线CSS投影滤镜生成器。可视化创建CSS filter: drop-shadow()效果。支持自定义水平偏移、垂直偏移、模糊半径和阴影颜色，实时预览效果，一键复制CSS代码。与box-shadow不同，drop-shadow会跟随元素形状（如PNG透明背景的图片）。适合前端开发者和设计师快速创建精准投影效果。纯前端处理，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⭐
使用说明： 上传带透明背景的PNG图片，或使用下方预览框。调整滑块实时查看投影效果。
常见问题
drop-shadow和box-shadow有什么区别？
filter: drop-shadow()会跟随元素的精确形状（包括透明区域），因此非常适合带有透明背景的PNG图片或圆角元素。而box-shadow在元素的边界框上创建矩形阴影，不考虑透明度。
可以用于PNG图片吗？
可以！上传带透明背景的PNG图片后，投影会跟随图片的实际形状，而不是矩形边界框。这是drop-shadow相比box-shadow的主要优势。
如何使用生成的CSS代码？
点击"复制CSS"按钮复制filter属性代码，直接粘贴到CSS样式表中使用。示例：filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
这个工具免费吗？
完全免费！无需注册，所有处理在浏览器本地完成。