Тема: Розмиття елементів за <nav></nav>

Мені потрібно зробити так щоб за елементом <nav> все було розмите як на цьому сайті https://bepatrickdavid.com/ (при скролі видно як це повинно виглядати)
Я вже пробував filter: blur(3px) для елемента <nav> але тоді сам елемент розмитий а от за ним все видно, також побував зробити за допомогою z-index але все одно не допомогло. Є в когось ідеї як це можна зробити? Буду вдячний за допомогу

<style>
    body{
        position: relative;
    }
    nav{
        position: fixed;
        height: 100px;
        width: 100%;
        background-color: rgb(115, 10, 16, 0.5);
    }
    header{
        background-color: antiquewhite;
    }
</style>
<body>
    <nav>
        <!-- Елементи навігації -->
    </nav>
    <header>
        <!-- Текст і елементи -->
    </header>
</body>

2

Re: Розмиття елементів за <nav></nav>

    backdrop-filter: blur(6px);

https://i.imgur.com/ZcjEnhJ.png

Подякували: dranchuk.roma1

3

Re: Розмиття елементів за <nav></nav>

karmeljuk написав:
    backdrop-filter: blur(6px);

Дуже дякую, все працює