<div class="container">
</div>

/* only draws the frame on browsers that support the filter */

@supports (backdrop-filter: none) {
  .container::before {
    /* applies an overlay using
    Walden filter */
    
    /* Walden filter */
    backdrop-filter:
      contrast(100%)
      brightness(110%)
      saturate(160%)
      sepia(30%)
      hue-rotate(350deg)
      ;
    
    /* drawing and positioning */
    content: "";
    position: absolute; 
    top: 60px;
    bottom: 30px;
    right: 80px;
    left: 80px;
    border-left: 10px solid white;
    border-right: 10px solid white;
    border-top: 10px solid white;
    border-bottom: 20px solid white;
    border-radius: 6px;
    box-shadow: 0 0 0 1px black, 10px 5px 5px 5px rgba(0, 0, 0, 0.5);  }
}

.container{
  background: url('https://placeimg.com/640/480/animals') no-repeat;
  position: absolute;
  top:0; bottom:0; right:0; left:0;
  margin: auto;
  max-width: 640px; max-height: 480px;
  
  /* centers content */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /*text styles*/
  font-size: 2rem;
  padding: 20px;
  text-align: center;
}

body{
  background: #222;
}

*{
  box-sizing: border-box;
}