CSS 滤镜生成器

九个滤镜参数滑块实时预览，一键复制 filter 与 backdrop-filter 代码，附复古、冷调、黑白等预设。

参数

亮度100%
对比度100%
饱和度100%
灰度0%
怀旧0%
色相0deg
模糊0px
反色0%
透明度100%

预览

示例图在浏览器里画出来，不用等下载
77 Tools
filter playground

CSS







  
filter 与 backdrop-filter 的区别

  
filter 作用于元素自身（包括它的子元素），把内容整体调色；backdrop-filter 只作用于元素背后的那片区域，所以毛玻璃导航栏要配半透明背景色才看得见效果。两者语法完全一样，可以同时用。

  
性能提醒：blur 与 backdrop-filter 会触发合成层，大面积长列表里滚动容易掉帧；能写成静态图片就别动态算。