Gradients

Vue Bootstrap 5 Gradient component

Bootstrap Vue gradient effect is a linear color progression - a smooth transition between two colors. The gradient effect can be used in a variety of components.

To learn more read Docs.

Gradient buttons

Edit in sandbox 
        
            

        <template>
          <MDBContainer>
            <button class="btn btn-block gradient-custom">
              Gradient
            </button>
          </MDBContainer>
        </template>

        
        
    
        
            

        <style>
          .gradient-custom {
            background: #667eea;
            background: -webkit-linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5));
            background: linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5))
          }
        </style>