Is there a way to change the background property of my material-ui AppBar ponent to blur the content blow the fixed navbar?

I've tried the filter: blur(0) and it doesn't work like I want. I have to get this kind of effect on the navbar with React/Styled-ponents/Material-UI

I've searched on the internet for many hours...I want, like in the following link for example, get a blur under this appbar : =/demo.js

Is there a way to change the background property of my material-ui AppBar ponent to blur the content blow the fixed navbar?

I've tried the filter: blur(0) and it doesn't work like I want. I have to get this kind of effect on the navbar with React/Styled-ponents/Material-UI

I've searched on the internet for many hours...I want, like in the following link for example, get a blur under this appbar : https://codesandbox.io/s/mwbwd?file=/demo.js

• javascript
• css
• reactjs
• material-ui
• styled-ponents

Share Improve this question Follow asked May 7, 2021 at 4:00 SpicyyRiiceSpicyyRiice 17611 gold badge44 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Just add sx={{backdropFilter:"blur(20px)"}} on the Appbar with color="transparent" added.

like <AppBar color="transparent" sx={{backdropFilter:"blur(20px)"}}>