Simple yet effective way to add shadows to create a depth/elevation effect. The shadows are in accordance to Material Design specifications (24 levels of depth).
Usage
| CSS Class Name | Description |
|---|---|
no-shadow | Remove any shadow |
inset-shadow | Set an inset shadow on top |
inset-shadow-down | Set an inset shadow on bottom (v1.14.7+) |
shadow-1 | Set a depth of 1 |
shadow-2 | Set a depth of 2 |
shadow-N | Where N is an integer from 1 to 24. |
shadow-transition | Apply the default CSS transition effect on the shadow |
The shadows above point towards the bottom of the element. If you want them to point towards the top of the element, add up before the number:
| CSS Class Name | Description |
|---|---|
shadow-up-1 | Set a depth of 1 |
shadow-up-2 | Set a depth of 2 |
shadow-up-N | Where N is an integer from 1 to 24. |