MDB shadows generator

Shadows can be complicated. Depending on the color of the element we added a shadow to and the background around it, the shadows look completely different.

In the examples below, an identical shadow has been used everywhere. However, the shadow looks different in each of them. This is due to the difference in contrast and the resulting illusion. Therefore, when choosing shadows for your design, you should take into account what will be the dominant colors in it.

Completely different shadows should be selected for light compositions, completely different for a dark theme, and still different if the dominant elements in our project are photos.


Snow in the Arctic
Five Lands National Park
Man in a Hat
        
            
              .shadow-custom { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px
              10px 5px rgba(0, 0, 0, 0.05) !important; }
            
        
    
        
            
              <div class="shadow-custom"></div>
            
        
    
Docs

How to use it?

1. Download MDB 5 - free UI KIT

2. Create the shadow you like

3. Copy the generated code and paste it into the MDB project

MDB 5 - Bootstrap 5 & Material Design UI Kit