title: Blur not working as expected
body: <p>I'm trying to apply blur effect on dialog pop-up.</p>
  
  <p>I'm using primeng p-dialog component.</p>
  
  <pre><code>&lt;p-panelMenu [model]="items" [style]="{'width':'300px'}"&gt;&lt;/p-panelMenu&gt;
  
  &lt;p-dialog header="HELLO" [(visible)]="display" modal="modal" [responsive]="true" [width]="350" [minWidth]="200" (onHide)="close($event)" &gt;
      &lt;span&gt;hi&lt;/span&gt;
  
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>In CSS I apply blur effect</p>
  
  <pre><code>::ng-deep .ui-widget-overlay {
        filter: blur(20px);
  }
  </code></pre>
  
  <p>The problem is that the blur effect is not working as expected.</p>
  
  <p>Actually I have a "glow" effect (<a href="https://stackblitz.com/edit/angular-dialogue?file=app%2Fapp.component.html" rel="nofollow noreferrer">see demo</a>) and not real blur effect like <a href="https://developer.mozilla.org/fr/docs/Web/CSS/filter-function/blur" rel="nofollow noreferrer">here</a></p>