Vue Bootstrap Gradient
Vue Gradient - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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 design, 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>
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>
Gradient on the image
You can easily apply a gradient to the image.
Before
.webp)
After
<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).webp" 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).webp" 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
You can also add a gradient to cards.
.webp)
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).webp" 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="utensils" /> 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>
<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).webp')">
<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
Use gradient for testimonials cards to highlight your customers' opinions.
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.
.webp)
John Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.
.webp)
Anna Aston
Neque cupiditate assumenda in maiores repudiandae mollitia architecto.
.webp)
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).webp" 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).webp" 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).webp" 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>