How is transparency implemented in the Mood theme on Yandex?

Question

css

In the process of studying web development, I became very curious, by what means was the frosted glass view implemented in the Yandex search engine mood theme? What knowledge is needed to realize this effect on your own?

Answer 1

Two pictures
Without blur - https://yastatic.net/www-skins/_/UBOZSYh5Ea-ZGg4kQ...
and with blur - https://yastatic.net/www-skins/_/nwpWSk0EIqn8I8S94...
You need to be able to put blocks background.
There are also css filters - https://developer.mozilla.org/ru/docs/Web/CSS/filter
It is important to remember that they act on the element, and not on what is under it.
UPD. Muddy panel example
https://jsfiddle.net/Tenebrius/pus9e7vg/2/

Answer 2

As for the pictures, to be honest, it’s not very clear exactly how they were used, but it’s especially interesting how they were “fitted”