Backdrop Filter is not applied in CSS & HTML

Question

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

Edit; I just found out the problem myself: I had two glassmorphism divs over eachother. For some reason that lead to a cancelation of the effect. In short: The styling above works but not for stacked divs

Answer 1

Use 10px instead of 10em

and your backdrop filter is working.