CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uistyled-components
SpicyyRiice
SpicyyRiice

Reputation: 156

MUI App bar and blur content below fixed Navbar

Is there a way to change the background property of my material-ui AppBar component 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-components/Material-UI enter image description here

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

Upvotes: 3

Views: 3900

Answers (1)

Shalom Prasannan
Shalom Prasannan

Reputation: 76

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

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

Upvotes: 6

Related Questions