How to Create a Responsive Custom Scrollbar using CSS?

Last updated: 7th July 2025

Not every page on this blog has a custom scrollbar, but this one does, and it stands out for a reason. Unlike the default scrollbars you see every day, this one’s tailored with style and purpose. In this article, I'll show you how to build your own responsive custom scrollbar using nothing but pure CSS.

Create responsive custom scrollbar using css

Custom scrollbars can give your web app or site a polished, modern feel. Whether it's for a <div>, a paragraph, or any scrollable element, you'll learn how to style scrollbars that not only look cool but also adapt gracefully across screen sizes. Let's dive into the scroll zone.

This example demonstrates how to create a responsive, custom-styled vertical scrollbar for a scrollable <div> using pure CSS.

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Custom Scrollbar using CSS</title>

  <style>
    /* Scrollable box */
    .scroll-box {
      overflow-y: auto;
      max-height: 200px;
      width: 70%;
      margin: 20px auto;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 8px;
      border: 1px solid #ccc;
    }

    /* Scrollbar for WebKit browsers */
    .scroll-box::-webkit-scrollbar {
      width: 8px;
    }

    .scroll-box::-webkit-scrollbar-track {
      background: #e0e0e0;
      border-radius: 4px;
    }

    .scroll-box::-webkit-scrollbar-thumb {
      background: linear-gradient(to bottom, #ff7e5f, #feb47b);
      border-radius: 4px;
    }

    /* Scrollbar for Firefox */
    .scroll-box {
      scrollbar-width: thin;
      scrollbar-color: #ff7e5f #e0e0e0;
    }

    /* Responsive using media query. */
    @media (max-width: 600px) {
      .scroll-box {
        max-height: 150px;
        width: 90%;
        font-size: 14px;
      }

      .scroll-box::-webkit-scrollbar {
        width: 5px;
      }
    }
  </style>
</head>

<body>
  <h1>Responsive Custom Scrollbar using CSS</h1>
  <div class="scroll-box">
    <p>We often use the !important property in CSS to ignore rules or styles applied to an element and instead apply rules that has !important property. You can further override the !important rules using ...</p>
    <p>Remember: The !important property is defined immediately after the style property and value and before the semicolon (;).</p>
    <p>The example uses media queries to adjust appearance on smaller devices</p>
    <p>Not every page on my blog, but this particular page has a custom scrollbar. Look at the scrollbar carefully. Yes, its different from a default scrollbar. Its a custom designed scrollbar. I'll show you how to create a cool responsive custom scrollbar using pure CSS.</p>
  </div>
</body> 
</html>

Try it

It has a very custom Look. It replaces the browser’s default scrollbar with a visually styled one, using gradients and rounded edges.

Cross Browser Styling

* The example uses ::-webkit-scrollbar and related pseudo-elements for Chrome, Edge, and Safari.
* It uses scrollbar-width and scrollbar-color for Firefox.

Responsive Behavior

* Includes a media query for screens smaller than 600px.
* It shrinks the scrollbar and adjusts the content area (like width and font size) to better fit smaller devices.

💡 The Design

The Scrollbar Thumb is a Gradient orange pink with a smooth, modern look.

The Scrollbar Track has a soft gray background to contrast with the thumb.

Hover Effect (optional): The example also shows how to add shadows on hover for a more interactive feel.

Check this out!

Conclusion

Custom scrollbars, styled with pure CSS, offer a great way to enhance your website’s user experience and aesthetic appeal. By targeting both WebKit and Firefox-specific styles, and incorporating responsive design via media queries, you can ensure your scrollable content looks polished across devices. With thoughtful color choices, rounded edges, and even hover effects, you transform a functional UI component into a seamless part of your design language.

← PreviousNext →