Angular Material - Mat-Dialog - change background blur / darkening effect

Question

Hello my beloved community,

Using angular with angular material.

With the default configuration when you open up a material dialog, it darkens the background a bit. Now I would like it to be a blurred background instead. I tried playing around with the css styles but I could not get the background of the window to change (couldn't get the right selector inside of component template).

I went through the documentation but there is nothing there. I can play a little bit more with the styles since I am sure there is probably some tricky way but considering the darkening effect is already there out of the box I would assume there should be a theming feature available out of the box as well. What you think?

Solution 1

I guess you've missed the property MatDialogConfig - backdropClass in the docs.

Check this StackBlitz DEMO for a simple example

From this DEMO:

dialog-overview-example.ts:

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: '250px',
    data: {name: this.name, animal: this.animal},
    backdropClass: 'backdropBackground' // This is the "wanted" line
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    this.animal = result;
  });
}

styles.css:

.backdropBackground {
  /* your css needs */
}

Solution 2

You can achieve a nice effect by combining opacity and blur. Do like this:

Add backdropClass to your dialog-options:

backdropClass: "bdrop"

And these rules to your stylesheet:

.bdrop {
    background-color: #bbbbbbf2;
    backdrop-filter: blur(4px);
}

Demo: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/

Solution 3

The given answer by @benshabatnoam is absolutely correct, but the documentation also has another option to disable the backdrop altogether.

hasBackdrop

Here is an example:

https://stackblitz.com/edit/angular-ei9hdv

Solution 4

Also you can just overide class .mat-dialog-container {} in your styles.scss

.mat-dialog-container {
  box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
  background: #fff;
  color: black;
}

View more solutions

Comments

[qubits]

Thanks @benschabatnoam, that's exactly what I was looking for. I don't know how I could have missed it in the documentation, it's right at the top.

[Darshan theerth]

can we use this class for making background blur using opacity

[benshabatnoam]

@Darshantheerth sure you can, I've updated the stackblitz sample to show you how to use the correct css