Blurring the contents in a div when Modal is displayed?

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>
    );
  }
}