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