Scrollbar and SmoothScroll

Bootstrap Scrollbar and SmoothScroll

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap smooth scroll is an animated movement from a trigger — such as button, link or any other clickable element — to another place of the same page.

Bootstrap SmoothScroll MDB Pro component

Click on the links below to see the live example

To achieve a Smooth Scroll effect, add the class .smooth-scroll to the parent element of your links

Edit in sandbox 
        
            

        <!--Navigation links with a Smooth Scroll effect-->
        <ul class="smooth-scroll list-unstyled">
          <li>
            <h5><a href="#test1">Click to scroll to section 1</a></h5>
          </li>
          <br>
          <li>
            <h5><a href="#test2">Click to scroll to section 2</a></h5>
          </li>
          <br>
        </ul>

        <!--Dummy sections with IDs coressponding with the links above-->
        <div id="test1">
          <h3>Section 1</h3>
          <hr>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
        </div>


        <div id="test2">
          <h3>Section 2</h3>
          <hr>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
          <h5>Smooth Scroll Example</h5>
        </div>

      
        
    
        
            
        // If you use .navbar with .smooth-scroll, use this code to avoid overlapping navigation to a header.

        #test1::before,
        #test2::before {
          display: block;
          content: " ";
          margin-top: -65px;
          height: 65px;
          visibility: hidden;
        }

Section 1

Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Section 2

Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Perfect scrollbar for an image

image
Edit in sandbox 
        
            

        <div class="my-custom-scrollbar my-custom-scrollbar-primary">
          <img alt="image" src="https://mdbootstrap.com/img/Photos/Others/food3.webp" />
        </div>

      
        
    
        
            

        .my-custom-scrollbar {
          position: relative;
          width: 800px;
          height: 400px;
          overflow: auto;
        }

      
        
    
        
            

        var myCustomScrollbar = document.querySelector('.my-custom-scrollbar');
        var ps = new PerfectScrollbar(myCustomScrollbar);

        var scrollbarY = myCustomScrollbar.querySelector('.ps__rail-y');

        myCustomScrollbar.onscroll = function () {
          scrollbarY.style.cssText = `top: ${this.scrollTop}px!important; height: 400px; right: ${-this.scrollLeft}px`;
        }

Material colors scrollbar

Scrollbar can be colored in material design colors.

Edit in sandbox 
        
            

        <div class="scrollbar scrollbar-primary">
          <div class="force-overflow"></div>
        </div>

      
        
    
        
            

        .scrollbar {
          margin-left: 30px;
          float: left;
          height: 300px;
          width: 65px;
          background: #fff;
          overflow-y: scroll;
          margin-bottom: 25px;
        }
        .force-overflow {
          min-height: 450px;
        }

        .scrollbar-primary::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-primary::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #4285F4;
        }

        .scrollbar-primary {
          scrollbar-color: #4285F4 #F5F5F5;
        }

        .scrollbar-danger::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-danger::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-danger::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #ff3547;
        }

        .scrollbar-danger {
          scrollbar-color: #ff3547 #F5F5F5;
        }

        .scrollbar-warning::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-warning::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-warning::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #FF8800;
        }

        .scrollbar-warning {
          scrollbar-color: #FF8800 #F5F5F5;
        }

        .scrollbar-success::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-success::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-success::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #00C851;
        }

        .scrollbar-success {
          scrollbar-color: #00C851 #F5F5F5;
        }

        .scrollbar-info::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-info::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-info::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #33b5e5;
        }

        .scrollbar-info {
          scrollbar-color: #33b5e5 #F5F5F5;
        }

        .scrollbar-default::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-default::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-default::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #2BBBAD;
        }

        .scrollbar-default {
          scrollbar-color: #2BBBAD #F5F5F5;
        }

        .scrollbar-secondary::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #F5F5F5;
          border-radius: 10px;
        }

        .scrollbar-secondary::-webkit-scrollbar {
          width: 12px;
          background-color: #F5F5F5;
        }

        .scrollbar-secondary::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: #aa66cc;
        }

        .scrollbar-secondary {
          scrollbar-color: #aa66cc #F5F5F5;
        }
Choose one of the following classes:
  • .scrollbar-primary
  • .scrollbar-secondary
  • .scrollbar-default
  • .scrollbar-info
  • .scrollbar-success
  • .scrollbar-warning
  • .scrollbar-danger

Gradient scrollbar

Scrollbar can be colored with gradient.

Edit in sandbox 
        
            

        <div class="scrollbar scrollbar-lady-lips">
          <div class="force-overflow"></div>
        </div>

      
        
    
        
            

.scrollbar-juicy-peach::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-juicy-peach::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-juicy-peach::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left top, right top, from(#ffecd2), to(#fcb69f));
    background-image: -webkit-linear-gradient(left, #ffecd2 0%, #fcb69f 100%);
    background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}

.scrollbar-young-passion::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-young-passion::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-young-passion::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left top, right top, from(#ff8177), color-stop(0%, #ff867a),
            color-stop(21%, #ff8c7f), color-stop(52%, #f99185), color-stop(78%, #cf556c), to(#b12a5b));
    background-image: -webkit-linear-gradient(left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
            #b12a5b 100%);
    background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%,
            #b12a5b 100%);
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
            to(#fecfef));
    background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-lady-lips {
    scrollbar-color: #ff9a9e #F5F5F5;
}

.scrollbar-sunny-morning::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-sunny-morning::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-sunny-morning::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #f6d365 0%, #fda085 100%);
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.scrollbar-sunny-morning {
    scrollbar-color: #f6d365 #F5F5F5;
}

.scrollbar-rainy-ashville::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-rainy-ashville::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-rainy-ashville::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a6c1ee));
    background-image: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a6c1ee 100%);
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.scrollbar-frozen-dreams::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-frozen-dreams::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1),
            to(#e6dee9));
    background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.scrollbar-warm-flame::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-warm-flame::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-warm-flame::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.scrollbar-night-fade::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-night-fade::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-night-fade::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
    background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.scrollbar-night-fade {
    scrollbar-color: #a18cd1 #F5F5F5;
}

.scrollbar-spring-warmth::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-spring-warmth::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-spring-warmth::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
    background-image: -webkit-linear-gradient(bottom, #fad0c4 0%, #ffd1ff 100%);
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}

.scrollbar-winter-neva::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-winter-neva::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-winter-neva::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #a1c4fd 0%, #c2e9fb 100%);
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.scrollbar-dusty-grass {
    scrollbar-color: #d4fc79 #F5F5F5;
}

.scrollbar-tempting-azure::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-tempting-azure::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-tempting-azure::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #84fab0 0%, #8fd3f4 100%);
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.scrollbar-heavy-rain::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-heavy-rain::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-heavy-rain::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#cfd9df), to(#e2ebf0));
    background-image: -webkit-linear-gradient(bottom, #cfd9df 0%, #e2ebf0 100%);
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.scrollbar-amy-crisp::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-amy-crisp::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-amy-crisp::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #a6c0fe 0%, #f68084 100%);
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}

.scrollbar-mean-fruit::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-mean-fruit::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-mean-fruit::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #fccb90 0%, #d57eeb 100%);
    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}

.scrollbar-mean-fruit {
    scrollbar-color: #fccb90 #F5F5F5;
}

.scrollbar-deep-blue::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-deep-blue::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-deep-blue::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #e0c3fc 0%, #8ec5fc 100%);
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

.scrollbar-deep-blue {
    scrollbar-color: #8ec5fc #F5F5F5;
}

.scrollbar-ripe-malinka::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-ripe-malinka::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

.scrollbar-ripe-malinka {
    scrollbar-color: #f5576c #F5F5F5;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #fdfbfb 0%, #ebedee 100%);
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.scrollbar-morpheus-den::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-morpheus-den::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
    background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.scrollbar-morpheus-den {
    scrollbar-color: #330867 #F5F5F5;
}

.scrollbar-rare-wind::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-rare-wind::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-rare-wind::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
    background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.scrollbar-rare-wind {
    scrollbar-color: #a8edea #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
    background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
    background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.scrollbar-near-moon {
    scrollbar-color: #b490ca #F5F5F5;
}
Choose one of the following classes:
  • .scrollbar-juicy-peach
  • .scrollbar-young-passion
  • .scrollbar-lady-lips
  • .scrollbar-sunny-morning
  • .scrollbar-rainy-ashville
  • .scrollbar-frozen-dreams
  • .scrollbar-warm-flame
  • .scrollbar-night-fade
  • .scrollbar-spring-warmth
  • .scrollbar-winter-neva
  • .scrollbar-dusty-grass
  • .scrollbar-tempting-azure
  • .scrollbar-heavy-rain
  • .scrollbar-amy-crisp
  • .scrollbar-mean-fruit
  • .scrollbar-deep-blue
  • .scrollbar-ripe-malinka
  • .scrollbar-cloudy-knoxville
  • .scrollbar-morpheus-den
  • .scrollbar-rare-wind
  • .scrollbar-near-moon

Scrollbar options

Depending on the style in which you would like your scrollbar, we have prepared several different types.

Edit in sandbox 
        
            

        <div class="scrollbar square scrollbar-lady-lips thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar square scrollbar-lady-lips">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-black bordered-black square thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-black bordered-black square">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-pink bordered-pink thin">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar scrollbar-pink bordered-pink">
          <div class="force-overflow"></div>
        </div>

      
        
    
        
            
.scrollbar-pink::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-pink::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-pink::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #ec407a;
}

.scrollbar-pink {
    scrollbar-color: #ec407a #F5F5F5;
}

.scrollbar-indigo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-indigo::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-indigo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #3f51b5;
}

.scrollbar-indigo {
    scrollbar-color: #3f51b5 #F5F5F5;
}

.scrollbar-black::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-black::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-black::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #000;
}

.scrollbar-black {
    scrollbar-color: #000 #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef),
            to(#fecfef));
    background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-near-moon::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
    background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
    background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.bordered-pink::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #ec407a;
}

.bordered-pink::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}

.bordered-indigo::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #3f51b5;
}

.bordered-indigo::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}

.bordered-black::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #000;
}

.bordered-black::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}

.square::-webkit-scrollbar-track {
    border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
    width: 6px;
}
Choose one of the following classes:
  • .square>
  • .thin>
  • .bordered-primary>
  • .bordered-secondary>
  • .bordered-default>
  • .bordered-info>
  • .bordered-success>
  • .bordered-warning>
  • .bordered-danger>
  • .bordered-black>
  • .bordered-pink>
  • .bordered-indigo>

Scrollbar usage within cards

Scrollbar can also be used inside the cards.

First title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Second title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Third title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Fourth title of the news

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Edit in sandbox 
        
            

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

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

            <!-- Exaple 1 -->
            <div class="card example-1 scrollbar-ripe-malinka">
              <div class="card-body">
                <h4 id="section1"><strong>First title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

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

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

            <!-- Exaple 1 -->
            <div class="card example-1 square scrollbar-cyan bordered-cyan">
              <div class="card-body">
                <h4 id="section1"><strong>Second title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

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

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

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

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

            <!-- Exaple 1 -->
            <div class="card example-1 scrollbar-deep-purple bordered-deep-purple thin">
              <div class="card-body">
                <h4 id="section1"><strong>Third title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

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

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

            <!-- Exaple 1 -->
            <div class="card example-1 square scrollbar-dusty-grass square thin">
              <div class="card-body">
                <h4 id="section1"><strong>Fourth title of the news</strong></h4>
                <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out
                  qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
                  mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim
                  qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic.
                  Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
              </div>
            </div>
            <!-- Exaple 1 -->

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

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

      
        
    
        
            

.scrollbar-deep-purple::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-deep-purple::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-deep-purple::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #512da8;
}

.scrollbar-deep-purple {
    scrollbar-color: #512da8 #F5F5F5;
}

.scrollbar-cyan::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-cyan::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-cyan::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #00bcd4;
}

.scrollbar-cyan {
    scrollbar-color: #00bcd4 #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.scrollbar-ripe-malinka::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-ripe-malinka::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

.bordered-deep-purple::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #512da8;
}

.bordered-deep-purple::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}

.bordered-cyan::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border: 1px solid #00bcd4;
}

.bordered-cyan::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
}

.square::-webkit-scrollbar-track {
    border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
    width: 6px;
}

.example-1 {
    position: relative;
    overflow-y: scroll;
    height: 200px;
}

Scrollbar within form MDB Pro component

Sign up

Forgot Password?

or Sign in with:

Not a member? Sign Up

SIGN UP

Have an account? Log in

Edit in sandbox 
        
            

      <div class="row">

        <!-- Grid column -->
        <div class="col-md-10 col-lg-8 col-xl-5 mb-4">

          <section class="form-elegant scrollbar-light-blue">

            <!--Form without header-->
            <div class="card">

              <div class="card-body mx-4">

                <!--Header-->
                <div class="text-center">
                  <h3 class="dark-grey-text mb-5"><strong>Sign up</strong></h3>
                </div>

                <!--Body-->
                <div class="md-form">
                  <input type="text" id="Form-name1" class="form-control">
                  <label for="Form-name1">Your name</label>
                </div>

                <div class="md-form">
                  <input type="text" id="Form-surname1" class="form-control">
                  <label for="Form-surname1">Your surname</label>
                </div>

                <div class="md-form">
                  <input type="text" id="Form-email1" class="form-control">
                  <label for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control">
                  <label for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
                      Password?</a></p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i
                      class="fab fa-facebook-f blue-text text-center"></i></button>
                  <!--Twitter-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i
                      class="fab fa-twitter blue-text"></i></button>
                  <!--Google +-->
                  <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i
                      class="fab fa-google-plus-g blue-text"></i></button>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#"
                    class="blue-text ml-1">
                    Sign Up</a></p>
              </div>

            </div>
            <!--/Form without header-->

          </section>

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

        <!-- Grid column -->
        <div class="col-md-10 col-lg-8 col-xl-5 mx-xl-auto">

          <!--Section: Live preview-->
          <section class="form-dark scrollbar-dusty-grass thin square">

            <!--Form without header-->
            <div class="card card-image"
              style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp');">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">

                <!--Header-->
                <div class="text-center">
                  <h3 class="white-text mb-5 mt-4 font-weight-bold"><strong>SIGN</strong> <a
                      class="green-text font-weight-bold"><strong>
                        UP</strong></a></h3>
                </div>

                <!--Body-->
                <div class="md-form">
                  <input type="text" id="Form-name5" class="form-control white-text">
                  <label for="Form-name5">Name</label>
                </div>
                <div class="md-form">
                  <input type="text" id="Form-surname5" class="form-control white-text">
                  <label for="Form-surname5">Surname</label>
                </div>
                <div class="md-form">
                  <input type="text" id="Form-email5" class="form-control white-text">
                  <label for="Form-email5">Email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass5" class="form-control white-text">
                  <label for="Form-pass5">Password</label>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="checkbox6">
                    <label for="checkbox6" class="form-check-label white-text">Accept the<a href="#"
                        class="green-text font-weight-bold">
                        Terms and Conditions</a></label>
                  </div>
                </div>

                <!--Grid row-->
                <div class="row d-flex align-items-center mb-4">

                  <!--Grid column-->
                  <div class="text-center mb-3 col-md-12">
                    <button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign in</button>
                  </div>
                  <!--Grid column-->
                </div>
                <!--Grid row-->

                <!--Grid column-->
                <div class="col-md-12">
                  <p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#"
                      class="green-text ml-1 font-weight-bold">
                      Log in</a></p>
                </div>
                <!--Grid column-->

              </div>
            </div>
            <!--/Form without header-->

          </section>
          <!--Section: Live preview-->

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

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

    
        
    
        
            

.form-elegant .font-small {
    font-size: 0.8rem;
}

.form-elegant .z-depth-1a {
    -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
    box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
}

.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
    -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
    box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
}

.form-elegant,
.form-dark {
    position: relative;
    height: 604px;
    overflow-y: scroll;
}

.form-dark .font-small {
    font-size: 0.8rem;
}

.form-dark [type="radio"]+label,
.form-dark [type="checkbox"]+label {
    font-size: 0.8rem;
}

.form-dark [type="checkbox"]+label:before {
    top: 2px;
    width: 15px;
    height: 15px;
}

.form-dark .md-form label {
    color: #fff;
}

.form-dark input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #00C851;
    -webkit-box-shadow: 0 1px 0 0 #00C851;
    box-shadow: 0 1px 0 0 #00C851;
}

.form-dark input[type=text]:focus:not([readonly])+label {
    color: #fff;
}

.form-dark input[type=password]:focus:not([readonly]) {
    border-bottom: 1px solid #00C851;
    -webkit-box-shadow: 0 1px 0 0 #00C851;
    box-shadow: 0 1px 0 0 #00C851;
}

.form-dark input[type=password]:focus:not([readonly])+label {
    color: #fff;
}

.form-dark input[type="checkbox"]+label:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    z-index: 0;
    border: 1.5px solid #fff;
    border-radius: 1px;
    margin-top: 2px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.form-dark input[type="checkbox"]:checked+label:before {
    top: -4px;
    left: -3px;
    width: 12px;
    height: 22px;
    border-style: solid;
    border-width: 2px;
    border-color: transparent #00c851 #00c851 transparent;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.scrollbar-light-blue::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-light-blue::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-light-blue::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #82B1FF;
}

.scrollbar-light-blue {
    scrollbar-color: #82B1FF #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-dusty-grass::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

.square::-webkit-scrollbar-track {
    border-radius: 0 !important;
}

.square::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

.thin::-webkit-scrollbar {
    width: 6px;
}