CSS实现毛玻璃模糊效果

lzhdim2026-02-24 8:46

CSS是真的强大；最近又发现个好玩的CSS属性；可以实现毛玻璃的模糊效果。代码很简单；主要用到CSS的backdrop-filter属性里面的滤镜函数blur(10px) ，里面的数值越大；越模糊，再配合background-color的透明度；就实现了。代码如下

css 复制代码

.glass-effect {`  backdrop-`filter: blur(10px);`  `background-color: rgba(255, 255, 255, 0.3);`}`

话不多说；拿我的AI小助理照片实验了一下；上面加一层毛玻璃，拖动滑块分别改变透明度和模糊度；效果很明显。

当然上面这个例子只是一种用法，这个属性的用处很多，可适合用于模态框、导航栏、卡片等需要突出显示但又希望保留背景可见性的 UI 元素。