Angular Material card shadow colour

8
votes

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!

enter image description here

3
angularangular-material
you can override the component style by setting the encapsulation: ViewEncapsulation.None and the setting box-shadow: 1px 2px 10px 0 #ff0000 !important; - Joel Joseph

3 Answers

11
votes

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

1
votes

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);
}
0
votes
.mat-card {
    box-shadow: 0px 0px 10px 0px #9b9b9b,
        0 1px 1px 0 #9b9b9b,
        0 1px 3px 0 #9b9b9b;
}