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 conjunction 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. |