毛玻璃这种模糊效果在各种应用程序中见得不少，实际上这种显示效果在 CSS 中也能做到，而且可以分成两种类型，分别是元素本身模糊与元素背景模糊（指的是被元素覆盖的区域），光是用文字描述可能不太清晰，以下是对比图：

可以明显看出左边只有元素的内容部分模糊了，背景是清晰的，而右边元素的内容很清晰，但被元素覆盖的区域模糊了。

使用方式

控制元素内容区模糊的样式是 filter: blur()，让元素覆盖区域模糊的样式是 backdrop-filter: blur()，这两个样式控制着不同的行为，所以两个样式重叠的时候并不会相互覆盖，而且效果叠加：

额外说明

要注意的是，模糊效果并不是 filter 与 backdrop-filter 带来的（特殊日子使网页变灰的 greyscale 也是通过这两个样式起作用的），起关键作用的是 blur，具体的模糊程度由参数控制，比如 blur(10px)。模糊的效果实际上是通过高斯模糊算法实现的，参数表示的是模糊的半径，算法细节可参考百科。

模糊是个比较损耗性能的效果，与动画一起使用时可能会出现肉眼可见的掉帧。