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?

Answer 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 */
}

Answer 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/

Answer 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

Answer 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;
}

Answer 5

const dialogConfig = new MatDialogConfig();**strong text**
dialogConfig.id="dialog"
this.dialog.open(CreatOrderComponent,dialogConfig)

// you can give it an ID then you can use that id to style it

Answer 6

mat-dialog open and background blur

  const dialogRef = this.dialog.open(openComponent, {
            backdropClass: 'custom-dialog-overlay',  // mat-dialog css class
            disableClose: true  // If you click outside the mat-dialog box window, it will not close. 
        });

Global css

.custom-dialog-overlay {
  filter: blur(20px);
  background-color: #aba1a1;
  opacity: 0.7 !important;
}