webkit-backdrop-filter not working in React.js

I'm working on React website, trying to add a blur to a container with a span of text. For whatever reason, the blur will not show. I cannot figure out why.

Any help would be great!

HTML:

<div className={styles.CardContentContainer}>
                <div className={styles.ProjectTitle1}>
                  <span>Real Estate</span>
                </div>
...

CSS:

.ProjectTitle1 {
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    padding-top: 4px;
    color: white;
    font-weight: 700;
    z-index: 1;
    position: absolute;
    top: -84px;
    right: 0px;
    background-color: #aa1a18;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--main-top-shadow);
    box-shadow: var(--main-shadow);
}