Sign in


Sign up


Bootstrap Gradient

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


Basic gradients MDB Pro component

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

See the following Bootstrap gradients examples:

purple-gradient
blue-gradient
aqua-gradient
peach-gradient
Add to an element one of the following classes:
  • .purple-gradient
  • .blue-gradient
  • .aqua-gradient
  • .peach-gradient
                
<!-- Grid row -->
<div class="row">

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

        <div class="color-block purple-gradient z-depth-2">
            <h5>purple-gradient</h5>
        </div>

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

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

        <div class="color-block blue-gradient z-depth-2">
            <h5>blue-gradient</h5>
        </div>

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

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

        <div class="color-block aqua-gradient z-depth-2">
            <h5>aqua-gradient</h5>
        </div>

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

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

        <div class="color-block peach-gradient z-depth-2">
            <h5>peach-gradient</h5>
        </div>

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

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

Gradient on the image

Before

My photo

After

My photo
                
.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;
}
                
            
                
<div class="img-gradient">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (122).jpg" class="img-fluid z-depth-1-half" alt="My photo">
</div>
                
            

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

.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;
}
                
            
                
<!-- Grid row -->
<div class="row">

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

        <div class="card card-cascade narrower">

            <!--Card image-->
            <div class="view overlay img-gradient">
                <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt="photo">
                <a>
                    <div class="mask waves-effect waves-light"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-body">
                <h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
                <!--Title-->
                <h4 class="card-title">Cheat day inspirations</h4>
                <!--Text-->
                <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                    aliquid ex ea commodi.</p>
                <a class="btn btn-unique waves-effect waves-light">Button</a>
            </div>
            <!--/.Card content-->

        </div>

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

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

        <div class="card card-image mb-3" 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"><i class="fa fa-desktop"></i> Software</h5>
                    <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                    <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>
                    <a class="btn btn-deep-orange waves-effect waves-light"><i class="fa fa-clone left"></i> View project</a>
                </div>
            </div>
        </div>

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

</div>
                
            

Additional gradients

warm-flame-gradient
night-fade-gradient
spring-warmth-gradient
juicy-peach-gradient
young-passion-gradient
lady-lips-gradient
sunny-morning-gradient
rainy-ashville-gradient
frozen-dreams-gradient
winter-neva-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
                
.juicy-peach-gradient {
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
.young-passion-gradient {
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}
.lady-lips-gradient {
    background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}
.sunny-morning-gradient {
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.rainy-ashville-gradient {
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
.frozen-dreams-gradient {
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
.warm-flame-gradient {
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.night-fade-gradient {
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.spring-warmth-gradient {
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}
.winter-neva-gradient {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}
.dusty-grass-gradient {
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}
.tempting-azure-gradient {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.heavy-rain-gradient {
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
.amy-crisp-gradient {
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}
.mean-fruit-gradient {
    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}
.deep-blue-gradient {
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
.ripe-malinka-gradient {
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
.cloudy-knoxville-gradient {
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
.morpheus-den-gradient {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.rare-wind-gradient {
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
.near-moon-gradient {
    background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}
                
            
Add to an element one of the following classes:
  • .warm-flame-gradient
  • .night-fade-gradient
  • .spring-warmth-gradient
  • .juicy-peach-gradient
  • .young-passion-gradient
  • .lady-lips-gradient
  • .sunny-morning-gradient
  • .rainy-ashville-gradient
  • .frozen-dreams-gradient
  • .winter-neva-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
                
<!-- Grid row -->
<div class="row text-center">

    <!-- Grid column -->
    <div class="col-md-4 mb-4">
        <h5>warm-flame-gradient</h5>
        <div class="color-block mx-auto mt-3 warm-flame-gradient z-depth-2"></div>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4 mb-4">
        <h5>night-fade-gradient</h5>
        <div class="color-block mx-auto mt-3 night-fade-gradient z-depth-2"></div>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4 mb-4">
        <h5>spring-warmth-gradient</h5>
        <div class="color-block mx-auto mt-3 spring-warmth-gradient z-depth-2"></div>
    </div>
    <!-- Grid column -->

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

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.

                
.lady-lips-gradient {
    background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}
.sunny-morning-gradient {
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.rainy-ashville-gradient {
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
                
            
                
<section class="section text-center">

    <!--Section heading-->
    <h1 class="section-heading h1 pt-4">Testimonials</h1>
    <!--Section description-->
    <p class="section-description">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>

    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up sunny-morning-gradient">
                </div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">John Doe</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.</p>
                </div>

            </div>
            <!--Card-->

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

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up rainy-ashville-gradient">
                </div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">Anna Aston</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
                </div>

            </div>
            <!--Card-->

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

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <!--Card-->
            <div class="card testimonial-card">

                <!--Background color-->
                <div class="card-up lady-lips-gradient"></div>

                <!--Avatar-->
                <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-responsive">
                </div>

                <div class="card-body">
                    <!--Name-->
                    <h4 class="card-title mt-1">Maria Kate</h4>
                    <hr>
                    <!--Quotation-->
                    <p><i class="fa fa-quote-left"></i> Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.</p>
                </div>

            </div>
            <!--Card-->

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

    </div>

</section>
                
            

Gradient buttons MDB Pro component

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

    <!-- Grid column -->
    <div class="col-md-12 mb-r">
        
        <a class="btn-floating btn-lg purple-gradient"><i class="fa fa-bolt"></i></a>
        <a class="btn-floating peach-gradient"><i class="fa fa-leaf"></i></a>
        <a class="btn-floating btn-sm blue-gradient"><i class="fa fa-star"></i></a>

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

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <button type="button" class="btn peach-gradient btn-rounded">Primary</button>
        <button type="button" class="btn blue-gradient btn-rounded">Default</button>
        <button type="button" class="btn purple-gradient btn-rounded">Secondary</button>

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

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

        <button type="button" class="btn blue-gradient">Primary</button>
        <button type="button" class="btn purple-gradient">Default</button>
        <button type="button" class="btn peach-gradient">Secondary</button>

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

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