Rate this docs

React Bootstrap Gradient

React Gradient - Bootstrap 4 & Material Design

React 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 deisgn, 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

          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          const GradientPage = () => {
            return (
              <MDBContainer className="mt-5">
                <MDBRow className="mt-4 text-center">
                  <MDBCol md="3" className="mb-4">
                    <div className="purple-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
                    <h5 className="mb-0">purple-gradient</h5>
                  </MDBCol>
                  <MDBCol md="3" className="mb-4">
                    <div className="blue-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
                    <h5 className="mb-0">blue-gradient</h5>
                  </MDBCol>
                  <MDBCol md="3" className="mb-4">
                    <div className="aqua-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
                    <h5 className="mb-0">aqua-gradient</h5>
                  </MDBCol>
                  <MDBCol md="3" className="mb-4">
                    <div className="peach-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1"></div>
                    <h5 className="mb-0">peach-gradient</h5>
                  </MDBCol>
                </MDBRow>
              </MDBContainer >
          
            );
          }
          
          export default GradientPage;
      

          .color-block-5 {
            height: 200px;
            width: 200px;
          }
      

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

          import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

const GradientPage = () => {
  return (
    <MDBContainer className="mt-5">
      <MDBRow className="mt-4">
        <MDBCol md="4" className="mb-4">
          <div className="warm-flame-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>warm-flame-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="night-fade-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>night-fade-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="spring-warmth-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>spring-warmth-gradient</h5>
        </MDBCol>
      </MDBRow>

      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="juicy-peach-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>juicy-peach-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="young-passion-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>young-passion-gradient</h5>
        </MDBCol>
        <MDBCol md="4">
          <div className="rainy-ashville-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>rainy-ashville-gradient</h5>
        </MDBCol>
      </MDBRow>



      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="sunny-morning-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>sunny-morning-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="lady-lips-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>lady-lips-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="winter-neva-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>winter-neva-gradient</h5>
        </MDBCol>
      </MDBRow>
      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="frozen-dreams-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>frozen-dreams-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="dusty-grass-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>dusty-grass-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="tempting-azure-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>tempting-azure-gradient</h5>
        </MDBCol>
      </MDBRow>
      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="heavy-rain-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>heavy-rain-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="amy-crisp-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>amy-crisp-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="mean-fruit-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>mean-fruit-gradient</h5>
        </MDBCol>
      </MDBRow>
      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="deep-blue-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>deep-blue-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="ripe-malinka-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>ripe-malinka-gradient</h5>
        </MDBCol>
        <MDBCol md="4">
          <div className="cloudy-knoxville-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>cloudy-knoxville-gradient</h5>
        </MDBCol>
      </MDBRow>
      <MDBRow>
        <MDBCol md="4" className="mb-4">
          <div className="morpheus-den-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>morpheus-den-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="rare-wind-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>rare-wind-gradient</h5>
        </MDBCol>
        <MDBCol md="4" className="mb-4">
          <div className="near-moon-gradient color-block-5 mb-3 mx-auto rounded-circle z-depth-1-half"></div>
          <h5>near-moon-gradient</h5>
        </MDBCol>
      </MDBRow>
    </MDBContainer >
  );
}

export default GradientPage;
      

        .color-block-5 {
          height: 200px;
          width: 200px;
        }
        

Gradient on the image

Before

My photo

After

My photo

          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GradientPage = () => {
            return (
              <MDBContainer className="mt-5">
                <MDBRow>
                  <MDBCol md="6" className="mb-4">
                    <h3 className="secondary-heading mb-4">
                      Before
                    </h3>
                    <div>
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (122).jpg" className="img-fluid" alt="My photo" />
                    </div>
                  </MDBCol>
                  <MDBCol md="6">
                    <h3 className="secondary-heading mb-4">
                      After
                    </h3>
                    <div className="img-gradient">
                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img (122).jpg" className="img-fluid" alt="My photo" />
                    </div>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }

          export default GradientPage;
      

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

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

              import React, { Component } from 'react';
              import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBBtn, MDBCardTitle, MDBView, MDBCardImage, MDBMask, MDBCardBody, MDBCardText } from 'mdbreact';
              
              class GradientPage extends Component {
                render() {
                  return (
                    <MDBContainer>
                      <MDBRow className="mx-1">
                        <MDBCol md="6" className="mb-4 mb-md-0">
                          <section>
                            <MDBCard narrow>
                              <MDBView hover cascade>
                                <MDBCardImage src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" alt="Card image cap"></MDBCardImage>
                                <MDBMask waves className="img-gradient"></MDBMask>
                              </MDBView>
                              <MDBCardBody cascade>
                                <h5 className="pink-text"><mdb-icon icon="cutlery" /> Culinary</h5>
                                <MDBCardTitle>Cheat day inspirations</MDBCardTitle>
                                <MDBCardText>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</MDBCardText>
                                <MDBBtn color="unique">Button</MDBBtn>
                              </MDBCardBody>
                            </MDBCard>
                          </section>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };
              }
              
              export default GradientPage;         

          
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

              import React, { Component } from 'react';
              import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBBtn, MDBIcon, MDBCardTitle } from 'mdbreact';
              
              class TestimonialsPage extends Component {
                render() {
                  return (
                    <MDBContainer>
                      <MDBRow className="mx-1">
                        <MDBCol md="6" className="mb-4 mb-md-0">
                          <section>
                            <MDBCard style={{ backgroundImage: "url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')" }}>
                              <div className="text-white text-center d-flex align-items-center img-gradient-overlay py-5 px-4">
                                <div>
                                  <h5 className="orange-text"><MDBIcon icon="desktop" /> Software</h5>
                                  <MDBCardTitle tag="h3" className="pt-2"><strong>This is card title</strong></MDBCardTitle>
                                  <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>
                                  <MDBBtn color="deep-orange"><MDBIcon icon="clone left" /> View project</MDBBtn>
                                </div>
                              </div>
                            </MDBCard>
                          </section>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };
              }
              
              export default TestimonialsPage;
          

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

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.


          import React, { Component } from 'react';
          import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardUp, MDBAvatar, MDBCardBody, MDBIcon } from 'mdbreact';
          
          class GradientPage extends Component {
            render() {
              return (
                <MDBContainer>
                  <section className="text-center my-5">
                    <h2 className="h1-responsive font-weight-bold my-5">Testimonials v.1</h2>
                    <p className="dark-grey-text w-responsive mx-auto mb-5">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 veniam.</p>
                    <MDBRow>
                      <MDBCol lg="4" md="12" className="mb-lg-0 mb-4">
                        <MDBCard testimonial>
                          <MDBCardUp gradient="sunny-morning"></MDBCardUp>
                          <MDBAvatar className="mx-auto white">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" className="rounded-circle img-fluid" />
                          </MDBAvatar>
                          <MDBCardBody>
                            <h4 className="font-weight-bold mb-4">John Doe</h4>
                            <hr />
                            <p className="dark-grey-text mt-4"><MDBIcon icon="quote-left" className="pr-2"></MDBIcon>Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.</p>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBCol>
                      <MDBCol lg="4" md="6" className="mb-lg-0 mb-4">
                        <MDBCard testimonial>
                          <MDBCardUp gradient="rainy-ashville"></MDBCardUp>
                          <MDBAvatar className="mx-auto white">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" className="rounded-circle img-fluid" />
                          </MDBAvatar>
                          <MDBCardBody>
                            <h4 className="font-weight-bold mb-4">Anna Aston</h4>
                            <hr />
                            <p className="dark-grey-text mt-4"><i className="fa fa-quote-left pr-2"></i>Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBCol>
                      <MDBCol lg="4" md="6" className="mb-lg-0 mb-4">
                        <MDBCard testimonial>
                          <MDBCardUp gradient="lady-lips"></MDBCardUp>
                          <MDBAvatar className="mx-auto white">
                            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" className="rounded-circle img-fluid" />
                          </MDBAvatar>
                          <MDBCardBody>
                            <h4 className="font-weight-bold mb-4">Maria Kate</h4>
                            <hr />
                            <p className="dark-grey-text mt-4"><i className="fa fa-quote-left pr-2"></i>Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.</p>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBCol>
                    </MDBRow>
                  </section>
                </MDBContainer>
              );
            };
          }
          
          export default GradientPage;
      

Gradient buttons MDB Pro component


          import React from "react";
          import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from "mdbreact";
          
          const GradientPage = () => {
            return (
              <MDBContainer className="mt-5">
                <MDBRow>
                  <MDBCol md="12" className="mb-4">
                    <MDBBtn tag="a" floating size="lg" gradient="purple"><MDBIcon icon="bolt" /></MDBBtn>
                    <MDBBtn tag="a" floating gradient="peach"><MDBIcon icon="bolt" /></MDBBtn>
                    <MDBBtn tag="a" floating size="sm" gradient="blue"><MDBIcon icon="bolt" /></MDBBtn>
                  </MDBCol>
                  <MDBCol md="12" className="mb-4">
                    <MDBBtn gradient="peach" rounded>Peach</MDBBtn>
                    <MDBBtn gradient="blue" rounded>Blue</MDBBtn>
                    <MDBBtn gradient="purple" rounded>Purple</MDBBtn>
                  </MDBCol>
                  <MDBCol md="12" className="mb-4">
                    <MDBBtn gradient="blue">Blue</MDBBtn>
                    <MDBBtn gradient="purple">Purple</MDBBtn>
                    <MDBBtn gradient="peach">Peach</MDBBtn>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }
          
          export default GradientPage;