MDB shadows generator

Generate the perfect shadow for your design

Other tools Shadows docs Free MDB UI KIT

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.



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

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