Angular Material's elevation classes and mixins allow you to add separation between elements along the z-axis. All material design elements have resting elevations. In addition, some elements may change their elevation in response to user interaction. The Material Design spec explains how to best use elevation.
Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins.
Predefined CSS classes
The easiest way to add elevation to an element is to simply add one of the predefined CSS classes mat-elevation-z# where # is the elevation number you want, 0-24. Dynamic elevation can be achieved by switching elevation classes:
<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>