CODEWITHSUNDEEP
angularangular-material
EngineSense
EngineSense

Reputation: 3646

Angular Material card shadow colour

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

Upvotes: 12

Views: 29695

Answers (4)

Sajeeb Chandan Saha
Sajeeb Chandan Saha

Reputation: 865

On your global style.scss or style.css (Whichever css format you're using) you can use the following code.

Please note that, this is for Angular Material CDK 16

.mat-mdc-card {
    box-shadow: 0 0 10px 1px #00000026 !important;
    border-radius: 1em !important;
}

Upvotes: 0

Mohammad Komaei
Mohammad Komaei

Reputation: 9656

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

Upvotes: 1

shaheer shukur
shaheer shukur

Reputation: 1167

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

Upvotes: 2

Marshal
Marshal

Reputation: 11081

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

Upvotes: 15

Related Questions