CSS filter 有哪些常用函数？

常用函数包括 blur()（模糊）、brightness()（亮度）、contrast()（对比度）、saturate()（饱和度）、grayscale()（灰度）、sepia()（褐色）、hue-rotate()（色相旋转）等。

filter 和 backdrop-filter 有什么区别？

filter 作用于元素本身及其内容；backdrop-filter 作用于元素背后的区域，常用于毛玻璃效果（backdrop-filter: blur()）。

可以。在 filter 属性中用空格分隔多个函数即可，如 filter: blur(2px) brightness(1.2) contrast(1.1)。

某些 filter（如 blur）会触发 GPU 加速，通常性能不错。但对大量元素使用复杂滤镜可能影响渲染性能。

可视化调整 CSS filter 属性，支持模糊、亮度、对比度、饱和度等滤镜效果

新工具

预览

CSS 代码

filter: drop-shadow(2px 2px 4px #000000);

预设

模糊 (blur)0px

亮度 (brightness)100%

对比度 (contrast)100%

饱和度 (saturate)100%

灰度 (grayscale)0%

褐色 (sepia)0%

色相旋转 (hue-rotate)0deg

反转 (invert)0%

透明度 (opacity)100%

Drop Shadow

Blur

颜色