Bootstrap Lesson: 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:

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.

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

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

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.

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

<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 & Code for this Lesson