Gradient background

Bootstrap 5 Gradient background component

Responsive gradient background built with Bootstrap 5. Enhance your web design with beautiful, intuitive, and responsive gradient backgrounds.

Basic example

By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Do you need a gradient in your custom CSS? Just add background-image: var(--mdb-gradient);.

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Edit in sandbox 
        
            
      
      <div class="bg-primary"></div>
      <div class="bg-secondary"></div>
      <div class="bg-success"></div>
      <div class="bg-danger"></div>
      <div class="bg-warning"></div>
      <div class="bg-info"></div>
      <div class="bg-body-tertiary"></div>
      <div class="bg-dark"></div>
      <div class="bg-white"></div>
      <div class="bg-transparent"></div>

Our gradient generator

Add .gradient-custom class to the div, then add the CSS code generated in the CSS gradients generator.

Edit in sandbox 
        
            
      <div class="gradient-custom w-100" style="height: 250px;">
      </div>
      
        
    
        
            
      .gradient-custom {
        /* fallback for old browsers */
        background: #30cfd0;
      
        /* Chrome 10-25, Safari 5.1-6 */
        background: -webkit-linear-gradient(to right, rgba(48,207,208,1), rgba(51,8,103,1));
      
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        background: linear-gradient(to right, rgba(48,207,208,1), rgba(51,8,103,1))
      }

Advanced

An advanced gradient can be created by combining multiple layers of linear and radial gradients and using background blend modes.

Edit in sandbox 
        
            
      <div class="gradient-advanced w-100" style="height: 400px;">
      </div>
      
        
    
        
            
      .gradient-advanced {
        background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
          linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
          linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
          radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
          radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
        background-blend-mode: screen, color-dodge, overlay, difference, normal;
      }