CSS easy to achieve 'frosted glass' effect

frosted glass

1. backdrop-filt property

By adding backdrop-filter:blur(模糊值)this CSS property to the element, the area where the element is located, including other elements behind, will be blurred or the color will be shifted , and the element itself, including the internal elements, will not be blurred.

Before adding: After
insert image description here
adding backdrop-filter: blur(3px); : (in addition to adding a border to highlight the area where the frosted glass is located)

Note: The element or its background color is set to a transparent color to see the effect

insert image description here

// CSS 部分代码
.wrap .top {
    
    
            position: absolute;
            width: 300px;
            height: 100px;
            margin: 20px;
            border: 1px solid #000;
            background-color: transparent;
            backdrop-filter: blur(3px);//毛玻璃属性
        }

<div class="wrap">
        <div class="top"></div> 
        //由于类名为 top 的 div 盒子绝对定位，脱离文档流，同时层级提升，因此 div 盒子的层级高于 p 段落的层级，
        //div 盒子会将 p 元素覆盖，位于 p 元素的上方，p 标签中的文字位于 div 盒子后方，在 div 盒子添加 backdrop：blur(3px)后，文字也就变模糊了
        <p>best wish for you</p>
        <p>少年如他</p>
    </div>

2. filter attribute

The element to which the filter attribute is added includes internal elements and borders will be blurred or color shifted , and will not cause other elements other than the element to be blurred or color shifted.
insert image description here

3. backdrop-filter && filter

	backdrop-filter	filter
Action object	The area behind the element (including elements behind it)	The element itself (has no effect on the back area or other elements)
invalid object	the element itself	rear area or other elements
Precautions	It is best to set the transparent color of the element or background to view the effect	/

As shown in the figure: the background-filter attribute is added to the box element with black border on the top; the text (Hello) and black border inside the element are not blurred, and the Chinese, English and background trees behind the element are blurred

Add the filter attribute to the red border box element below; the text inside the element (a teenager like him) and the red border are blurred, but the background tree is not blurred

insert image description here

4. References

MDN