Rate this docs

Angular Bootstrap Gradients

Angular Gradients - Bootstrap 4 & Material Design

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

  • Documentation page,
  • Magazine,
  • ERP system.

See the following breadcrumbs examples:


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 Angular 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-4">

              <div class="color-block purple-gradient z-depth-2 py-4 text-center white-text">
                <h5>purple-gradient</h5>
              </div>

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

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

              <div class="color-block blue-gradient z-depth-2 py-4 text-center white-text">
                <h5>blue-gradient</h5>
              </div>

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

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

              <div class="color-block aqua-gradient z-depth-2 py-4 text-center white-text">
                <h5>aqua-gradient</h5>
              </div>

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

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

              <div class="color-block peach-gradient z-depth-2 py-4 text-center white-text">
                <h5>peach-gradient</h5>
              </div>

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

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

        

Gradient on the image

Before

My photo

After

My photo

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

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

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

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

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

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

                <!--Card image-->
                <div class="view">
                  <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="card-img-top"
                    alt="photo">
                  <a>
                    <div class="mask img-gradient"></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">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"><i class="fa fa-clone left"></i> View project</a>
                  </div>
                </div>
              </div>

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

          </div>

        

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

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

          <div class="container text-center">
            <!-- Grid row -->
            <div class="row">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        

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.


          <section class="text-center">

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

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

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

                  <!--Avatar-->
                  <div class="avatar mx-auto"><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-4">

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

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

                  <!--Avatar-->
                  <div class="avatar mx-auto"><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-4">

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

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

                  <!--Avatar-->
                  <div class="avatar mx-auto"><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>

        

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

Gradient buttons MDB Pro component


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

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

              <a mdbBtn floating="true" gradient="purple" size="lg">
                <mdb-icon icon="bolt"></mdb-icon>
              </a>
              <a mdbBtn floating="true" gradient="peach">
                <mdb-icon icon="leaf"></mdb-icon>
              </a>
              <a mdbBtn floating="true" gradient="blue" size="sm">
                <mdb-icon icon="star"></mdb-icon>
              </a>
            </div>
            <!-- Grid column -->

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

              <button type="button" mdbBtn gradient="peach" rounded="true">Peach</button>
              <button type="button" mdbBtn gradient="blue" rounded="true">Blue</button>
              <button type="button" mdbBtn gradient="purple" rounded="true">Purple</button>

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

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

              <button type="button" mdbBtn gradient="purple">Purple</button>
              <button type="button" mdbBtn gradient="blue">Blue</button>
              <button type="button" mdbBtn gradient="peach">Peach</button>

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

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

        

Angular Gradients - API

In this section you will find informations about required modules of Angular gradients.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { ButtonsModule } from 'ng-uikit-pro-standard'