Gradients

Angular Bootstrap 5 Gradient component

Bootstrap Angular 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 
        
            

        <div class="container">
          <div
            class="d-flex justify-content-center align-items-center"
            style="height: 100vh"
          >
            <button class="btn gradient-custom">
              Gradient
            </button>
          </div>
        </div>
        
        
    
        
            

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