title: How to add a blur behind a <div>?
body: <p>I have this:
  <a href="https://i.stack.imgur.com/XZ6x8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZ6x8.png" alt="Box with rounded corners has a white body, a dark blue header, and a grey footer."></a></p>
  
  <p>I want to add box shadow border like this so that we can see the white part:
  <a href="https://i.stack.imgur.com/Bx1kI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bx1kI.png" alt="Box with a light grey shadow extending from all four sides."></a></p>
  
  <p>For the moment my HTML structure looks like this:</p>
  
  <pre><code>&lt;div class="card-post"&gt;
  
    &lt;div class="top"&gt;
      &lt;div class="my-container"&gt;
  
        &lt;div class="left"&gt;
          &lt;img src="profile-picture.svg" alt=""&gt;
        &lt;/div&gt;
  
        &lt;div class="middle"&gt;
          &lt;p&gt;Username&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="right"&gt;
          &lt;img src="more-btn.svg" alt=""&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  
    &lt;div class="content"&gt;
  
    &lt;/div&gt;
  
    &lt;div class="bottom"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>