About the ground glass effect of web pages

look it up on the Internet, and if you want to achieve the ground glass effect on the web page, it is all blurred by blur.
but this blur must be applied to the original image.
is there nothing you can do if you want to make a frosted glass effect for the video? It is better to have a real ground-glass div layer so that it can be controlled with js.

at present, it seems that this effect can not be achieved. I tried it with photoshop, but there is no way to make a ground glass layer.
but skatch has a special function to generate such a layer, so I think this problem is too simple.

Aug.21,2021

mix-blend-mode


CSS3 filter

filter: blur (5px); this is probably the effect:
clipboard.png


Zhihu found
backdrop-filter
-webkit-backdrop-filter
perfectly meets the requirements.
is only supported by Edge and safari.

Menu