Как применить blur к блоку, чтобы все содержимое под ним размывалось. (Блок пуст)?

Применить свойство blur к блоку, чтобы всё содержимое под ним размывалось, невозможно. otvet.mail.ru CSS-фильтры, в том числе blur, применяются к контенту самого элемента, а не к тому, что находится под ним. otvet.mail.ru

Однако есть несколько вариантов, как размыть фон за блоком:

• Использовать свойство backdrop-filter. qna.habr.com ru.stackoverflow.com Оно позволяет размыть фон за блоком, при этом сам блок должен быть с прозрачностью, чтобы сквозь него было видно результат (эффект мутного стекла). qna.habr.com Пример использования: backdrop-filter: blur(10px). qna.habr.com
• Продублировать всё, что находится в фоне, и размыть. qna.habr.com Этот вариант сложно реализовать для всех возможных элементов, так как всё, что находится в фоне, нужно повторно добавить в нужный блок, обрезать и размыть, при этом важно, чтобы всё совпадало. qna.habr.com