Как реализовать такое размытие блока?

Question

[Сергей Хлопов]

Как реализовать такой блок ? Он собственно немного размыт и немного прозрачный, под этим блоком немного видны вот дороги, карта яндекса. Заранее благодарю за ответ

Comments

[Антон Федорян]

opacity: 0.5, // прозрачность
  filter: blur() // размытие

[Rustam Bainazarov]

Вам поможет только backdrop-фильтр, который будет работать только в Safari.

Answer 1

[Ragtime Kitty]

Если карта динамичная, то backdrop-filter, который, увы, работает только в сафари или вебките с флагами.

Вот тут пара приемов чтобы его имитировать: https://iamvdo.me/en/blog/css-element-function#fak...
А вот тут общая инфа: https://iamvdo.me/en/blog/advanced-css-filters

Если карта статичная, то можно ее просто дублировать внутри блока и размазывать обычным фильтром. Хотя и динамичную можно скопировать, но надо будет ловить взаимодействия на карте и дублировать их внутри

Comments

[Сергей Хлопов]

Благодарю

Answer 2

[Andrej Sharapov]

немного {
opacity;
filter:blur();
box-shadow;
}

пример фильтра
подборка теней

Comments

[Сергей Хлопов]

Благодарю