CSS 图标滤镜生成器
CSS 滤镜图标版聚焦透明通道友好的效果：以 drop-shadow 给非矩形图标投贴合轮廓的阴影，配合 invert、hue-rotate、opacity 调整单色图标颜色与显隐，输出 filter 值，解决 png 图标方框阴影不贴边的问题。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 为图标添加 drop-shadow
- 调节轮廓阴影颜色模糊
- 用 invert 与色相改变图标色
- 复制 filter 声明应用
典型场景
给透明 logo 加贴合形状的外阴影
单色图标反白适配深色导航
悬停时改变 SVG 图标色调
常见问题
drop-shadow 与 box-shadow 区别？
drop-shadow 沿不透明像素轮廓投影，box-shadow 按矩形盒子。
能改 SVG 颜色吗？
对单色图形可用 invert 与 hue-rotate 近似换色。
和通用滤镜版不同在哪？
本版面向透明元素与图标阴影，通用版偏整图调色。