Materialize CSS Shadow
Materialize CSS provides different types of special classes to display containers as paper-like cards with shadow. These shadows make texts and images more appealing.
Index |
Class name |
Description |
1) |
z-depth-0 |
It is used to remove the shadow of elements having z-depth by default. |
2) |
z-depth-1 |
It is used to style a container for any html content with 1px bordered shadow. adds z-depth of 1. |
3) |
z-depth-2 |
It is used to style a container for any html content with 2px bordered shadow. adds z-depth of 2. |
4) |
z-depth-3 |
It is used to style a container for any html content with 3px bordered shadow. adds z-depth of 3. |
5) |
z-depth-4 |
It is used to style a container for any html content with 4px bordered shadow. adds z-depth of 4. |
6) |
z-depth-5 |
It is used to style a container for any html content with 5px bordered shadow. adds z-depth of 5. |
Example
Let's take an example to demonstrate the Materialize CSS shadow.
Test it Now
Output:
|