Rate this docs

Vue Bootstrap Gradient

Vue Gradient - Bootstrap 4 & Material Design

Vue Bootstrap gradient is a linear color progression - a transition between two colors is fluent. Gradient can be used in various of components.

Gradients are now coming back to website deisgn, so it's good idea to try them out in your projects.


Basic gradients

The four bright gradients, most commonly used in MDB.

purple-gradient
blue-gradient
aqua-gradient
peach-gradient


<template>
  <mdb-container class="mt-5">
    <mdb-row class="mt-4 text-center">
      <!-- Grid column -->
      <mdb-col md="3" class="mb-4">
        <div class="purple-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
        <h5 class="mb-0">purple-gradient</h5>
      </mdb-col>
      <!-- Grid column -->

      <!-- Grid column -->
      <mdb-col md="3" class="mb-4">
        <div class="blue-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
        <h5 class="mb-0">blue-gradient</h5>
      </mdb-col>
      <!-- Grid column -->

      <!-- Grid column -->
      <mdb-col md="3" class="mb-4">
        <div class="aqua-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
        <h5 class="mb-0">aqua-gradient</h5>
      </mdb-col>
      <!-- Grid column -->

      <!-- Grid column -->
      <mdb-col md="3" class="mb-4">
        <div class="peach-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
        <h5 class="mb-0">peach-gradient</h5>
      </mdb-col>
      <!-- Grid column -->

    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from "mdbvue";

export default {
  name: "GradientPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>        

      

Additional gradients

Below, you have more light, gentle, eye-catching gradients options.

warm-flame-gradient
night-fade-gradient
spring-warmth-gradient
juicy-peach-gradient
young-passion-gradient
rainy-ashville-gradient
sunny-morning-gradient
lady-lips-gradient
winter-neva-gradient
frozen-dreams-gradient
dusty-grass-gradient
tempting-azure-gradient
heavy-rain-gradient
amy-crisp-gradient
mean-fruit-gradient
deep-blue-gradient
ripe-malinka-gradient
cloudy-knoxville-gradient
morpheus-den-gradient
rare-wind-gradient
near-moon-gradient


<template>
  <mdb-container class="mt-5">

      <!-- Grid row -->
      <mdb-row class="mt-4">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="warm-flame-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>warm-flame-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="night-fade-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>night-fade-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="spring-warmth-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>spring-warmth-gradient</h5>
        </div>
        <!-- Grid column -->

      </mdb-row>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="juicy-peach-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>juicy-peach-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="young-passion-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>young-passion-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4">
          <div class="rainy-ashville-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>rainy-ashville-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="sunny-morning-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>sunny-morning-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="lady-lips-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>lady-lips-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="winter-neva-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>winter-neva-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="frozen-dreams-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>frozen-dreams-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="dusty-grass-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>dusty-grass-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="tempting-azure-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>tempting-azure-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="heavy-rain-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>heavy-rain-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="amy-crisp-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>amy-crisp-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="mean-fruit-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>mean-fruit-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="deep-blue-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>deep-blue-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="ripe-malinka-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>ripe-malinka-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4">
          <div class="cloudy-knoxville-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>cloudy-knoxville-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

      <!-- Grid row -->
      <div class="row">

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="morpheus-den-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>morpheus-den-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="rare-wind-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>rare-wind-gradient</h5>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 mb-4">
          <div class="near-moon-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>near-moon-gradient</h5>
        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->

  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from "mdbvue";

export default {
  name: "GradientPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style> 

      

Gradient on the image

Before

My photo

After

My photo


<template>
  <mdb-container class="mt-5">
    <mdb-row class="mt-4">

      <!-- Grid column -->
      <div class="col-md-6 mb-4">

          <!--Title-->
          <h3 class="secondary-heading mb-4">
            Before
          </h3>

          <div>
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (122).jpg" class="img-fluid" alt="My photo">
          </div>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-6">

          <!--Title-->
          <h3 class="secondary-heading mb-4">
            After
          </h3>

          <div class="img-gradient">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (122).jpg" class="img-fluid" alt="My photo">
          </div>

      </div>
      <!-- Grid column -->

    </mdb-row>

  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol } from "mdbvue";

export default {
  name: "GradientPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.color-block-5 {
  height: 200px;
  width: 200px;
}
.img-gradient{
  position:relative;
  display:inline-block;
}
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)), color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
  display:block;
}
</style>

      

Gradient within cards MDB Pro component

Culinary

Cheat day inspirations

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button


<template>
  <mdb-container class="mt-5">
    <mdb-row class="mx-1">

      <!--Grid column-->
      <mdb-col md="6" class="mb-4 mb-md-0">

        <!--Section: Live preview-->
        <section>
          <mdb-card narrow>
            <mdb-view hover cascade>
              <mdb-card-image src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap"></mdb-card-image>
              <mdb-mask waves class="img-gradient"></mdb-mask>
            </mdb-view>
            <mdb-card-body cascade>
              <h5 class="pink-text"><mdb-icon icon="cutlery" /> Culinary</h5>
              <mdb-card-title>Cheat day inspirations</mdb-card-title>
              <mdb-card-text>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</mdb-card-text>
              <mdb-btn color="unique">Button</mdb-btn>
            </mdb-card-body>
          </mdb-card>
        </section>
        <!--Section: Live preview-->

      </mdb-col>
      <!--Grid column-->

    </mdb-row>
    <!-- Grid row -->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbCard, mdbView, mdbCardImage, mdbMask, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbCardAvatar, mdbCardUp } from "mdbvue";

export default {
  name: "GradientProPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbIcon,
    mdbCard,
    mdbView,
    mdbCardImage,
    mdbMask,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbBtn,
    mdbCardAvatar,
    mdbCardUp
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-gradient {
  display:inline-block;
  opacity: 1;
}
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)), color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
  display:block;
}

.img-gradient-overlay { /* FF3.6+ */ /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
  background: -o-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
  background: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  border-radius: .3rem;
}
</style>            

          
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project


<template>
  <mdb-container class="mt-5">
    <mdb-row class="mx-1">

      <!--Grid column-->
      <mdb-col md="6" class="mb-4 mb-md-0">

        <!--Section: Live preview-->
        <section>
          <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')">
            <div class="text-white text-center d-flex align-items-center img-gradient-overlay py-5 px-4">
              <div>
                <h5 class="orange-text"><mdb-icon icon="desktop" /> Software</h5>
                <mdb-card-title tag="h3" class="pt-2"><strong>This is card title</strong></mdb-card-title>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                    Odit sed qui, dolorum!.</p>
                <mdb-btn color="deep-orange"><mdb-icon icon="clone left" /> View project</mdb-btn>
              </div>
            </div>
          </mdb-card>
        </section>
        <!--Section: Live preview-->

      </mdb-col>
      <!--Grid column-->

    </mdb-row>
    <!-- Grid row -->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbCard, mdbView, mdbCardImage, mdbMask, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbCardAvatar, mdbCardUp } from "mdbvue";

export default {
  name: "GradientProPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbIcon,
    mdbCard,
    mdbView,
    mdbCardImage,
    mdbMask,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbBtn,
    mdbCardAvatar,
    mdbCardUp
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-gradient {
  display:inline-block;
  opacity: 1;
}
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)), color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
  display:block;
}

.img-gradient-overlay { /* FF3.6+ */ /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
  background: -o-linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%);
  background: linear-gradient(rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  border-radius: .3rem;
}
</style>

          

Testimonial cards with gradients MDB Pro component

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.

Example photo

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Example photo

Anna Aston


Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Example photo

Maria Kate


Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.



<template>
  <mdb-container class="mt-5">
    <mdb-row class="mx-1">

      <section class="text-center">
        <!--Section heading-->
        <h2 class="h1 pt-4">Testimonials</h2>
        <!--Section description-->
        <p class="grey-text mb-5 mt-5 px-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

        <mdb-row>
          <mdb-col sm="4">
            <mdb-card testimonial>
              <mdb-card-up gradient="sunny-morning"></mdb-card-up>
              <mdb-card-avatar color="white" class="mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded-circle"></mdb-card-avatar>
              <mdb-card-body>
                <mdb-card-title>John Doe</mdb-card-title>
                <hr/>
                <p><mdb-icon icon="quote-left" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
              </mdb-card-body>
            </mdb-card>
          </mdb-col>
          <mdb-col sm="4">
            <mdb-card testimonial>
              <mdb-card-up gradient="rainy-ashville"></mdb-card-up>
              <mdb-card-avatar color="white" class="mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle"></mdb-card-avatar>
              <mdb-card-body>
                <mdb-card-title>Anna Aston</mdb-card-title>
                <hr/>
                <p><mdb-icon icon="quote-left" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
              </mdb-card-body>
            </mdb-card>
          </mdb-col>
          <mdb-col sm="4">
            <mdb-card testimonial>
              <mdb-card-up gradient="lady-lips"></mdb-card-up>
              <mdb-card-avatar color="white" class="mx-auto"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle"></mdb-card-avatar>
              <mdb-card-body>
                <mdb-card-title>Maria Kate</mdb-card-title>
                <hr/>
                <p><mdb-icon icon="quote-left" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
              </mdb-card-body>
            </mdb-card>
          </mdb-col>
        </mdb-row>
      </section>

    </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbCard, mdbView, mdbCardImage, mdbMask, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbCardAvatar, mdbCardUp } from "mdbvue";

export default {
  name: "GradientProPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbIcon,
    mdbCard,
    mdbView,
    mdbCardImage,
    mdbMask,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbBtn,
    mdbCardAvatar,
    mdbCardUp
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>        

      

Gradient buttons MDB Pro component



<template>
  <mdb-container class="mt-5">
    <mdb-row>

      <!-- Grid column -->
      <mdb-col md="12" class="mb-4">

          <mdb-btn tag="a" floating size="lg" gradient="purple"><mdb-icon icon="bolt" /></mdb-btn>
          <mdb-btn tag="a" floating gradient="peach"><mdb-icon icon="bolt" /></mdb-btn>
          <mdb-btn tag="a" floating size="sm" gradient="blue"><mdb-icon icon="bolt" /></mdb-btn>

      </mdb-col>
      <!-- Grid column -->

      <!-- Grid column -->
      <mdb-col md="12" class="mb-4">

          <mdb-btn gradient="peach" rounded>Peach</mdb-btn>
          <mdb-btn gradient="blue" rounded>Blue</mdb-btn>
          <mdb-btn gradient="purple" rounded>Purple</mdb-btn>

      </mdb-col>
      <!-- Grid column -->

      <!-- Grid column -->
      <mdb-col md="12" class="mb-4">

          <mdb-btn gradient="blue">Blue</mdb-btn>
          <mdb-btn gradient="purple">Purple</mdb-btn>
          <mdb-btn gradient="peach">Peach</mdb-btn>

      </mdb-col>
      <!-- Grid column -->

    </mdb-row>
    <!-- Grid row -->
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbIcon, mdbCard, mdbView, mdbCardImage, mdbMask, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn, mdbCardAvatar, mdbCardUp } from "mdbvue";

export default {
  name: "GradientProPage",
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbIcon,
    mdbCard,
    mdbView,
    mdbCardImage,
    mdbMask,
    mdbCardBody,
    mdbCardTitle,
    mdbCardText,
    mdbBtn,
    mdbCardAvatar,
    mdbCardUp
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>