CSS Shadows (Elevation)
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).
Don’t forget to check the demo.
| CSS Class Name | Description |
|---|---|
no-shadow | Remove any shadow |
inset-shadow | Set an inset shadow |
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 a CSS transition on the shadow; best use in conjonction with hoverable classes |
Example:<div class="shadow-1">...</div>
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. |
Quasar 