Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 307
EngineSense Avatar asked Mar 20 '19 17:03

EngineSense


People also ask

What is matcard?

<mat-card> is a content container for text, photos, and actions in the context of a single subject.

What is class mat elevation z8?

the mat-elevation-z8 class is an Angular Material elevation class that allows you to add separation between elements along the z-axis.

How do I display two mat cards on the same row?

Try adding display: inline-block !

What is card in angular?

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.


2 Answers

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

like image 132
Marshal Avatar answered Oct 30 '22 07:10

Marshal


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);
}
like image 34
shaheer shukur Avatar answered Oct 30 '22 08:10

shaheer shukur