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

HTML


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


          <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

HTML
SCSS


          <!-- 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="fas fa-utensils"></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="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 class="btn btn-deep-orange"><i class="far 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

HTML


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

John Doe

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

Anna Aston

Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Maria Kate

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

HTML
SCSS


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

HTML


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

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

Import example Modules list

Introduction
Modules used