Note: If you wish to access the code snippets in the example files, you have to access them on a local server nor it will show error. Moreover, you can also access the code snippets from Propeller Pro User Manual

Shadow

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.

pmd-z-depth

pmd-z-depth-1

pmd-z-depth-2

pmd-z-depth-3

pmd-z-depth-4

pmd-z-depth-5