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

CSS 滤镜组合效果演示 - 实时对比

9
0
0
0
预设效果
原图 原始图片
滤镜效果 滤镜效果图片
左侧为原图，右侧为实时滤镜预览
模糊与清晰
亮度与对比
色彩调整
特殊效果
投影 Drop-shadow
0px
0px
0px
filter: none;
当前应用 0 个滤镜 可直接复制到CSS中使用
CSS滤镜常见问题

CSS filter 属性在所有现代浏览器中都有良好支持，包括 Chrome 53+、Firefox 35+、Safari 9.1+、Edge 12+。移动端 iOS Safari 9.3+ 和 Android Chrome 53+ 也完全支持。对于 IE 浏览器，仅部分支持（需使用 -ms-filter 或 SVG 滤镜替代方案）。目前全球覆盖率超过 97%，可以放心在生产环境中使用。

是的，滤镜按从左到右的顺序依次应用。例如 filter: blur(5px) grayscale(1); 会先将图片模糊5像素，然后对模糊后的结果进行灰度处理。如果调换顺序为 grayscale(1) blur(5px)，则先灰度再模糊。虽然在某些组合中最终视觉效果差异不大，但在涉及颜色变换（如 hue-rotate、sepia）和模糊的组合时，顺序会显著影响结果。建议将模糊类滤镜放在前面，颜色调整类放在后面，以获得更自然的过渡效果。

filter 作用于元素自身（包括其所有子元素和内容），会改变元素整体的渲染效果。常用于图片、视频等媒体元素。
backdrop-filter 作用于元素背后的区域，只影响透过该元素看到的背景内容（需要元素本身有透明或半透明背景）。常用于毛玻璃效果（backdrop-filter: blur(10px)）、导航栏背景虚化等场景。两者可以同时使用，创造出丰富的层次效果。

大多数 CSS 滤镜由 GPU 加速渲染，性能影响通常很小。但需要注意：blur() 滤镜（尤其是大半径模糊）计算量较大，在低性能设备上可能导致卡顿；多个滤镜叠加会增加 GPU 内存占用；对大型图片或频繁动画的元素使用滤镜时，建议进行性能测试。优化建议：避免对超大尺寸元素使用大半径模糊；使用 will-change: filter; 提示浏览器优化；在移动端谨慎使用多层滤镜叠加。

box-shadow 作用于元素的矩形边界框，阴影沿盒模型边缘生成，不支持透明PNG的轮廓阴影。
drop-shadow()（作为filter值）作用于元素的实际可见像素轮廓（alpha通道），能够为透明PNG图像、SVG图形等生成精确的轮廓阴影。例如，一张透明背景的圆形logo，filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) 会沿圆形的边缘生成阴影，而 box-shadow 只会生成矩形阴影。注意 drop-shadow 不支持 spread（扩展半径）参数和 inset 关键字。
🔧 相关工具