Angular Bootstrap Gradients

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

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).webp" 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

photo
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="col-md-4">
                      <!--Card-->
                      <mdb-card>
                        <!--Card image-->
                        <div class="view" mdbWavesEffect>
                          <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).webp"></mdb-card-img>
                          <a>
                            <div class="mask img-gradient"></div>
                          </a>
                        </div>
                        <!--/Card image-->
                        <mdb-card-body cascade="true">
                          <!--Card content-->
                          <h5 class="pink-text">
                            <i class="fas fa-utensils"></i> Culinary</h5>
                          <!--Title-->
                          <h4 class="card-title">Cheat day inspirations</h4>
                          <!--Text-->
                          <mdb-card-text>
                            Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem
                            aperiam.
                          </mdb-card-text>
                          <a mdbBtn color="unique" class="waves-light" mdbWavesEffect>Button</a>
                        </mdb-card-body>
                        <!--/.Card content-->
                      </mdb-card>
                      <!--/.Card-->
                    </div>
                </div>
              </div>
              <!-- Grid column -->
              <!-- Grid column -->
              <div class="col-md-6">
                <mdb-card style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).webp')" class="mb-3">
                  <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="fas 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 mdbBtn color="deep-orange"><i class="far fa-clone left"></i> View project</a>
                    </div>
                  </div>
                </mdb-card>
              </div>
              <!-- Grid column -->
            </div>
          
        
    
        
            
            .img-gradient {
              position: absolute;
              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).webp"
                        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="fas 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).webp"
                        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="fas 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).webp"
                        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="fas 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 fas icon="bolt"></mdb-icon>
                </a>
                <a mdbBtn floating="true" gradient="peach">
                  <mdb-icon fas icon="leaf"></mdb-icon>
                </a>
                <a mdbBtn floating="true" gradient="blue" size="sm">
                  <mdb-icon fas 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. 

        
            
          import { ButtonsModule } from 'ng-uikit-pro-standard'
Import example Modules list