Angular Material card shadow colour

Question

Is there any way to change the colour of the shadow which is dark under the card?

If any solution please let me know or any other workaround is appreciated!

Answer 1

Adding the following to your CSS will change the box-shadow for the mat-card

.mat-card:not([class*=mat-elevation-z]) {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,1), 
                0 1px 1px 0 rgba(0,0,0,1), 
                0 1px 3px 0 rgba(0,0,0,1);
}

If you are using an elevation, of course this CSS will need to be modified a bit.

Stackblitz

https://stackblitz.com/edit/angular-yxb2ow?embed=1&file=app/card-overview-example.css

Answer 2

Take a look at the latest angular material elevation

You can do something like this in style.sass

@import '~@angular/material/theming';

.my-class-with-custom-shadow {
  // Adds a shadow for elevation level 2 with color #e91e63 and 80% of the default opacity:
  @include mat-elevation(2, #e91e63, 0.8);
}

Answer 3

.mat-card {
    box-shadow: 0px 0px 10px 0px #9b9b9b,
        0 1px 1px 0 #9b9b9b,
        0 1px 3px 0 #9b9b9b;
}