CSS set Gaussian blur effect

Gaussian Blur (English: Gaussian Blur), also known as Gaussian smoothing, is a processing effect widely used in image processing software such as Adobe Photoshop, GIMP, and Paint.NET. It is usually used to reduce image noise and reduce the level of detail. The image produced by this blurring technique has the visual effect of looking at the image through a frosted glass.

achieve effect

The text above seems to be placed under a frosted glass, a looming feeling.

code

 <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);
}

The most important code is background-filter: blur(4px), you can increase 4px to show a more blurred effect.

CodePen - Frosted Glass Effect Preview

The article was first published on IICCOM-Personal Blog|Technical Blog "CSS Setting Gaussian Blur Effect"