CSS blur not working on pseudo element in chrome

Question

I'm trying to create a popup with an ::after pseudo element that blurs the entire background. Thing is, it does not add the blur effect I'm looking for. Is this normal? Is there a way to fix this?

This is the CSS:

.popup .popuptext::after {
  content: "";
  position: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity/see-through */
  z-index: -1;
  border-color: #555 transparent transparent transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

The background-color part registers, but it does not get blurred as visible in the screenshot:

Any input is appreciated!

*** HTML ****

<div class="container d-flex flex-row">
<div class="container col-3 d-flex partner">
            <div class="popup popup--maxwidth" onclick="popItUp()">
                <img src="<?php the_sub_field( 'brand_logo' ); ?>"></img>
                <span class="popuptext">
                    <span class="popup--close" onclick="popItUp()"><i class="fa fa-close" style="font-size:36px; color:white;"></i></span>
                    <img class="w-25 mx-auto pb-4" src="<?php the_sub_field( 'brand_logo' ); ?>"></img>
                    <h4 class="tagline--subheadline pt-2"><?php the_sub_field( 'title' ); ?></h4>
                    <img class=" mx-auto" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">
                    <h5><?php the_sub_field( 'brand_description' ); ?></h5>
                    <h3 class="tagline--subheadline pt-2">Related posts</h3>
                    <img class="mx-auto pb-3" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">

                    <div class="container mr-1">
                        <div class="d-flex">
                            

                            <div class="col-12 col-md-4 pr-0 pl-0 mr-4 posts posts--container flex-row"
                                style="background-image: url('<?php echo get_theme_file_uri( '/images/postbg.jpg' ); ?>">
                                <a href="<?php echo get_the_permalink(); ?>">
                                    <div class="posts posts--img" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>')" alt=""></div>
             
                                    <h5 class="posts posts--tagname"><?php echo $tag->name . ' '; ?></h5>
                                    
                                    <h3 class="posts posts--title"><?php echo the_title(); ?></h3>

                                    <h5 class="posts posts--tagname"><?php echo get_the_date(); ?></h5>
                                    <h6 class="posts posts--desc p-4"><?php echo get_the_content(); ?></h6>
                            </div>

                            </a>

                        </div>
                    </div>


                    <h3 class="tagline--subheadline pt-2">Partners</h3>
                    <img class="mx-auto pb-3" src="<?php echo get_theme_file_uri( '/images/dots.png' ); ?>;" width="45">
                    <div class="container partner d-flex justify-content-center">
                  

                        <div class="popup--partnerimage m-3" style="background-image: url(<?php echo the_sub_field( 'partner_image' ); ?>);"></div>



                       
                    </div>

            </div>
            </span>
        </div>
</div>

Answer 1

Backdrop-filter was the CSS I was looking for. Using it fixed the issue.