In material design, everything should have a certain pmd-z-depth that determines how far raised or close to the page the element is.

Types

You can easily apply this shadow effect by adding a .pmd-z-depth to an HTML tag. Alternatively you can extend any of these shadows using .pmd-z-depth-1, .pmd-z-depth-2 and more.

code 

							

							 
							
							

								

							

							 
						

						 
					
 
					
					
					

						
 
							
							

								

									
 
										
										
pmd-z-depth

									

									
 
										
										
pmd-z-depth-1

									

									
 
										
										
pmd-z-depth-2

									

									
 
										
										
pmd-z-depth-3

									

									
 
										
										
pmd-z-depth-4

									

									
 
										
										
pmd-z-depth-5