I can't put backdrop-filter: blur(); atribute in my div-container

Question

When I put a backdrop-filter atribute in 2 separate containers just the first one get the filter

Like this:

And i want to apply on both containers at the same time, i tried everything and i cant find a solution for it

i guess its something in my code that dont allow to make it

.nav-container{
    backdrop-filter: blur(7px);
    position: fixed;
    z-index: 10000;
    width: 100%;
    background-color: var(--background-tp);
}
.nav-menu{
        grid-template-columns: auto;
        width: 100%;
        top: 7vh;
        left: -100%;
        opacity: 0;
        transition: all .5s ease;
    }

Answer 1

First of all backdrop-filter is right now not supported by every browser, so you might not even see it working on your computer (see compatibility here).

backdrop-filter is a filter applied to the elements behind of your div, so you need to set the opacity of your element to less than 1 in order to see the actual filter, otherwise the div's background will "hide" anything behind it.

You can try:

.nav-container{
    backdrop-filter: blur(7px);
    opacity: 0.8;
    position: fixed;
    z-index: 10000;
    width: 100%;
    background-color: var(--background-tp);
}
.nav-menu{
    grid-template-columns: auto;
    width: 100%;
    top: 7vh;
    left: -100%;
    opacity: 0;
    transition: all .5s ease;
}