React Gradient

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

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

Show code

        
            
          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

Show code

        
            
          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

After

Show code

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

Show code

        
            
              import React, { Component } from 'react';
              import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBBtn, MDBCardTitle, MDBView, MDBCardImage, MDBMask, MDBCardBody, MDBCardText, MDBIcon } 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).webp" alt="Card image cap"></MDBCardImage>
                                <MDBMask waves className="img-gradient"></MDBMask>
                              </MDBView>
                              <MDBCardBody cascade>
                                <h5 className="pink-text"><MDBIcon icon="utensils" /> 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

Show code

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

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.

Show code

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

Show code

        
            
          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;