Backdrop Filter is not applied in CSS & HTML

I am trying to make a glassmorphism effect and my problem is that the webkit backdrop filter is not applied to the background of the div. the css code:

.glassmorphism {
    background: rgba( 255, 255, 255, 0.20);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    -webkit-backdrop-filter: blur(10em);
    backdrop-filter: blur(10em);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18);
}

html:

<div id="content__body" class="glassmorphism"></div>

And I get this error in chrome: invalid property value