Shadows

React Bootstrap 5 Shadows component

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. 

        
            
              import React from 'react';
      
              export default function App() {
                return (
                  <div className="shadow-inner"></div>
                );
              }

Shadow hover effect

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

        
            
            import React from 'react';
    
            export default function App() {
              return (
                <img
                  src='https://mdbootstrap.com/img/new/standard/city/041.webp'
                  className='img-fluid hover-shadow rounded-4'
                  alt=''
                />
              );
            }

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 
        
            
              import React from 'react';
              import { MDBContainer, MDBCol, MDBRow } from 'mdb-react-ui-kit';
      
              export default function App() {
                return (
                  <MDBContainer>
                    <MDBRow>
                      <MDBCol lg='4' md='12' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/041.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
        
                      <MDBCol lg='4' md='6' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/031.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
        
                      <MDBCol lg='4' md='6' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/043.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
                    </MDBRow>
        
                    <MDBRow>
                      <MDBCol lg='4' md='12' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/044.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
        
                      <MDBCol lg='4' md='6' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/045.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
        
                      <MDBCol lg='4' md='6' className='mb-4'>
                        <img
                          src='https://mdbootstrap.com/img/new/standard/city/046.jpg'
                          className='img-fluid shadow-2-strong rounded-4'
                          alt=''
                        />
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              }