Vue Bootstrap 5 Shadows
MDB shadows are lighter and brighter than standard Material Design shadows, which we consider a bit rough. Thanks to this, projects built with MDB gain an outstanding look and unique design.
For light design and bright compositions use standard shadows. To apply a shadow to an element simply add one of the following classes to it.
For dark design and dark elements use strong shadows by adding
-strong to the shadow class. For example:
Shadow hover effect
.hover-shadow class to the element you can apply a shadow hover effect.
<template> <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg" class="img-fluid hover-shadow" alt="" /> </template>
Images with shadow
Theoretically, depending on the brightness of the image you should use standard or strong shadow. However, practical use shows that in most graphics strong shadows work better in most cases with images.