CSS设置高斯模糊效果

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像。

实现效果

上方的文字好像放在了一个毛玻璃下面，一种若隐若现的感觉。

代码

<div class="header"></div>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>

body {
    background-color: bisque;
}
.header {
    height: 80px;
    position: sticky;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.16);
    top: 0;
    backdrop-filter: blur(4px);
}

最重要的代码就是backdrop-filter: blur(4px)，你可以把4px增大，就会表现出更加模糊的效果。

CodePen-毛玻璃效果预览

文章首发于 IICOOM-个人博客|技术博客 《CSS设置高斯模糊效果》