Как сделать эффект матового стекла на динамическом фоне?

Question

[zeni1agent]

Мне необходимо создать эффект матового стекла в выпадающем меню.
Я смотрел кучу примеров но все они завязаны на том что размывают картинку фона.
А мне необходимо размывать все что находится за этим меню Все дивы и текст размывались.

Я пытался как то адаптировать под свои нужды но получается как то блекло

.test2{
background: #3333339e;
width: 250px;
height: 350px;
position: absolute;
top: 50px;
left: 50px;
overflow: hidden; 
 }
 .test2:before {
  content: '';
  width: 300px;
  height: 400px;
  background: inherit;
  position: absolute;
  left: -25px;
  top: -25px;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.31);
  filter: blur(10px);
}

Я нашел вот такой пример можно ли с его помощью сделать размытый фон?
https://codepen.io/condacore/pen/QOvPdb

Comments

[Rustam Bainazarov]

Либо JS, либо каким-то там визуальным хаком, либо только для Safari есть свойство:
-webkit-backdrop-filter: blur(10px).

[Lord_Dantes]

Примеры что вам нужно можете показать сайт или ссылку на библу?

[zeni1agent]

Slave, Как здесь только для всех дивов и текста вместо картинки.

[Lord_Dantes]

zeni1agent, тогда в чем проблема наложить ::before свойство на блок с ul списком.

[littleguga]

zeni1agent https://stackoverflow.com/questions/38145368/css-w...

[zeni1agent]

Slave, Я уже объяснял мне нужен эффект размытия но НЕ ДЛЯ КАРТИНКИ! а для всего контента что находится позади div, hi, li, ul и так далее.
Мне нужен вот такой эффект ДЛЯ div, hi, li, ul не для картинки. ()

Но у меня получается только такое

[Rustam Bainazarov]

zeni1agent, простое решение есть только для Safari. Во всех остальных браузерах — решения нет. Только canvas/JS/SVG и долгие манипуляции.

https://m.habr.com/ru/post/264037/

Данные из статьи актуальны и поныне.

[zeni1agent]

littleguga, SmthTo,
Как я понял это код запускает backdrop-filter с помощью js
https://jsbin.com/makedaceve/edit?html,css,js,output
У меня даже с js не работает. Или я что то неправильно делаю?

[littleguga]

zeni1agent
Не совсем понял про какой Вы код, потому что по ссылке stackoverflow там вообще без js)
То есть там вариант на чистом CSS.

Вот для наглядности немного доработанный пример: https://codepen.io/anon/pen/jJPjwM
Вот оригинальный: https://codepen.io/jonitrythall/pen/GJQBOp

via https://stackoverflow.com/questions/38145368/css-w...

Answer 1

[zeni1agent]

Самый нормальный вариант который я нашел
chrisarasin.com/frosted-glass-css/draggable-window

Answer 2

[Stalker_RED]

но НЕ ДЛЯ КАРТИНКИ! а для всего контента что находится позади

Нет такой штуки в современных браузерах.

Можно сэмулировать: заскриншотить нужный кусок на canvas, размыть его, вставить фоном в меню. Впрочем, вам об этом уже писали.