Shadows

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.

Basic example

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.

Strong shadows

For dark design and dark elements use strong shadows by adding -strong to the shadow class. For example: .shadow-2-strong

Shadow hover effect

By adding .hover-shadow class to the element you can apply a shadow hover effect.

Show code

        
            
            <template>
              <img
                src="https://mdbootstrap.com/img/new/standard/city/041.webp"
                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.