Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Shadows

In this lesson we will take some time to learn the theory behind the shadows.

As in Material Design, shadows play a big role in Material Minimal (MDB design system). However, they are definitely more subtle here - they have brighter colors and are often more extensive.

Unlike Material Design, Material Minimal is not afraid to use colored shadows, which can be seen in the example of our buttons. However, these are always delicate accents, as Material Minimal values subtlety and avoids exaggeration.

The shadows are undoubtedly one of the most distinctive features of Material Minimal and give it a special flavor.

Default shadows

For light design and bright compositions Material Minimal uses delicate shadows on a five-grade scale. You can add them with the following classes:

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

For most components (such as cards or modals) Material Minimal uses standard, soft shadows of level 4 (the same as class shadow-4). 

        
            

        /* Default, soft shadow of level 4 */
        box-shadow: 0 2px 15px -3px rgb(0 0 0 / 7%), 0 10px 20px -2px rgb(0 0 0 / 4%)

They are added by default to the component.

Card example

Some quick example text to build on the card title and make up the bulk of the card's content.

Button shadows are subtly brushed with a color that matches their background color.

Strong shadows

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

Note: The same shadow added to a dark element will be much less noticeable than a shadow added to a light or white element.

The visibility of the shadow is also reduced by the background - the darker it is, the less visible it is, and the brighter it is, the more visible it is.

It's all about the contrast.





Shadow hover effect

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

Hollywood Sign on The Hill 
        
            
  
    <img
      src="https://mdbcdn.b-cdn.net/img/new/standard/nature/029.webp"
      class="img-fluid rounded-4 hover-shadow"
      alt="Winter forest"
    />
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 
        
            
  
      <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>
Note: To learn more about shadows read Shadows documentation page.
Add shadows to the carousel images

From what you have read above, it should be clear to you that we should use strong shadows in our carousel.

The photos in the carousel have intense, dark colors, so the default, light shadows would be practically invisible.

Just like the class for rounded corners, we also need to add a class for shadows to the carousel-inner element.

        
            
  
              <!-- Inner -->
              <div class="carousel-inner rounded-6 shadow-4-strong">

And that's it. After saving the file and refreshing the browser you should see the shadow added to the carousel.

Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.