backdrop-filter not working

37 4 15

Hello, I need help adding a backdrop-filter to my menu-drawer, i been testing so many time that i lost count how many fail attempts is been.


This is an example that i did with my cart drawer:

Screenshot 2024-01-06 192236.png

A nice backdrop-filter with a background color of rgba(1, 9, 10, 0.5)

but this is what i got with my menu-drawer

Screenshot 2024-01-06 192255.png




it doesn't look good 😞


i been trying to add a backdrop-filter to my menu-drawer but everytime i do so it just tells me NAH you can't do that.



.menu-drawer {

background: rgba(4, 4, 4, 0.8);
backdrop-filter: blur(20px);




 Can someone help? The things i have changed are this:


some icons for the header type .svg

component-menu-drawer.css and thats all


I'll leave the password and the website:

Password: St0r3P4ssw0rd



Reply 1 (1)

37 4 15

I think i found the problem.


See if i add a backdrop to my header, my drawer then removes the backdrop-filter effect:


Screenshot 2024-01-07 034615.png

Yall can see it too just add this code to my .header

or just remove my backdrop-filter


.header { 
 backdrop-filter: blur(20px);


And yall would see that now the menu-drawer is working with his Blueness and Transparency.