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>