本文目录
解读 CSS filter 属性
CSS 的 filter 属性可以为任意 HTML 元素应用模糊、亮度、对比度和色彩偏移等图形效果。它作用于图片、背景、文字，甚至整个页面版块。滤镜由浏览器的 GPU 处理，因此无需图像编辑软件就能高效地实现实时视觉效果。
CSS 内置了九个滤镜函数：blur（模糊）、brightness（亮度）、contrast（对比度）、grayscale（灰度）、hue-rotate（色相旋转）、invert（反色）、opacity（不透明度）、saturate（饱和度）和 sepia（褐色）。它们可以在同一个 filter 声明中串联组合，从而创建复杂的视觉效果。滤镜的顺序很重要——每个函数都会处理前一个函数的输出结果。
各个滤镜函数的工作原理
每个滤镜函数都接受一个值，并对元素的视觉输出进行变换。理解各函数的作用，有助于你有效地将它们组合起来，得到想要的效果。
- blur(px) ——应用高斯模糊效果，让元素看起来失焦。数值越大，模糊越强。适用于背景遮罩层和磨砂玻璃效果
- brightness(%) 和 contrast(%) ——brightness 用于整体调节明暗（100% 表示不变，200% 表示加倍），contrast 则调节亮部和暗部之间的差异。两者结合可以控制图像的色调范围
- grayscale(%)、sepia(%) 和 hue-rotate(deg) ——grayscale 去除色彩饱和度，sepia 添加温暖的棕褐色调，hue-rotate 则将所有颜色沿色轮旋转指定的度数
免费试用 —— 无需注册
生成 CSS 滤镜 →打造 Instagram 风格效果
通过叠加多个 CSS 滤镜函数，你完全可以用代码重现流行的照片滤镜效果。这些效果实时生效，并且无需修改源文件就能作用于任意图片元素。
- 复古效果——将 sepia(60%) 与 contrast(110%) 和 brightness(90%) 结合，营造出让人联想到老式胶片相机的温暖、褪色照片效果
- 黑白效果——使用 grayscale(100%) 搭配 contrast(120%)，可得到高对比度的单色效果。再加上 brightness(110%)，则能呈现更明亮、更干净的黑白观感
- 戏剧化氛围——将 contrast(150%) 与 saturate(130%) 和 brightness(80%) 叠加，营造出浓烈而昏暗的氛围，让色彩在深邃的阴影中格外鲜明
常见问题
我可以在 CSS filter 属性中使用 SVG 滤镜吗？
可以。CSS filter 中的 url() 函数让你能够引用自定义的 SVG 滤镜定义，实现内置函数之外的效果。它支持置换贴图、颜色矩阵和自定义卷积核等进阶效果。不过，SVG 滤镜创建起来更复杂，且浏览器支持度略低于内置的 CSS 滤镜函数。
CSS 滤镜会影响性能吗？
在现代浏览器中，CSS 滤镜由 GPU 加速，因此在大多数场景下都很高效。对图片应用单个滤镜几乎不会影响性能。但如果对大面积区域应用模糊、同时对多个滤镜做动画，或在布局复杂的元素上使用滤镜，可能会在性能较弱的设备上导致掉帧。发布前请在移动端测试。
滤镜可以在悬停时做动画吗？
可以。CSS 滤镜与过渡和动画能无缝配合。一种常见模式是：默认应用灰度或模糊滤镜，悬停时过渡到原始外观。例如：filter: grayscale(100%); transition: filter 0.3s; 并在 :hover 中设置 filter: none。这样就能实现平滑、GPU 加速的悬停效果。