React module css Backdrop filter not working why?

Question

what am i doing wrong here? why css is not applying on div and making it blur can someone help to make my navbar blur?

I want to make my navbar blurred

Try adding `-webkit-filter: blur(28px);` – Dulaj Ariyaratne Oct 27 '22 at 12:35 — Dulaj Ariyaratne, Oct 27 '22 at 12:35

score 0 · Answer 1 · answered Oct 27 '22 at 12:39

Most likely because you're adding blur to the container instead of the element in front of it. Check out this codesandbox where the h1 has a blur applied to it: https://codesandbox.io/s/purple-microservice-gcvbm1?file=/src/App.js:87-96

When you remove the container class from the div you'll notice that the blur isn't visible.

To be more clear: Backdrop-filter is applied to everything BEHIND the element that it's applied to.

1 Answers1