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.

.shadow-0 removes shadows
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5

Strong shadows

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





Inner shadow

Use the .shadow-inner utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells. 

        
            
              <template>
                <div class="shadow-inner"></div>
              </template>

Shadow hover effect

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

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

Hollywood Sign on The Hill
Five Lands National Park
Los Angeles Skyscrapers
Skyscrapers
New York City
American Home 
        
            
                <template>
                  <div class="container">
    
                    <!--Grid row-->
                    <div class="row">
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-12 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="Hollywood Sign on The Hill" />
                      </div>
                      <!--Grid column-->
    
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-6 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/031.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="Five Lands National Park" />
                      </div>
    
                      <!--Grid column-->
    
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-6 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="Los Angeles Skyscrapers" />
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
    
                    <!--Grid row-->
                    <div class="row">
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-12 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="Skyscrapers" />
                      </div>
                      <!--Grid column-->
    
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-6 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/045.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="New York City" />
                      </div>
                      <!--Grid column-->
    
                      <!--Grid column-->
                      <div class="col-lg-4 col-md-6 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/046.webp"
                          class="img-fluid rounded-4 shadow-2-strong" alt="American Home" />
                      </div>
                      <!--Grid column-->
                    </div>
                    <!--Grid row-->
    
                  </div>
                </template>