Blurring the contents in a div when Modal is displayed? - html

Question

I have an side-drawer/modal that will slide into view when clicking on an image of my application. I'm trying to blur all the contents behind the side-drawer when it comes into view, I realized I might need another component like Backdrop that takes the whole content of the page and somehow blur the whole div when the side-drawer is displayed.
I tried using backdrop-filter but that's not supported in Chrome yet. Are there any alternatives? Or am I going to need a transparent "dummy" image to blur?
My component is just this:
import React from 'react';
import styles from './styles.module.css';
const backdrop = props => (
<div className={styles.backdrop} onClick={props.click}></div>
)
export default backdrop;
I tried this:
.backdrop {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
filter: blur(2px);
z-index: 300;
}
And mounting it on my app as so:
class App extends Component {
componentDidMount() {
const { loadUserAction } = this.props;
const {
auth: { token }
} = readLocalStorage();
if (token) loadUserAction(token);
}
render() {
return (
<BrowserRouter>
<Route exact path={signInPath} component={Login} />
<Backdrop />
<SideDrawer />
<ProtectedRoute exact path={feedPath} component={MovieFeed} />
</BrowserRouter>
);
}
}