How To Create a Custom Scrollbar

Learn how to create a custom scrollbar with CSS.

Note: The ::-webkit-scrollbar is not supported by Firefox or IE and Edge.


Create a Custom Scrollbar

Webkit browsers (such as Chrome, Safari and Opera) supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

The following example creates a thin (1em wide) scrollbar, which has a lightgrey track color and a red handle:

/* width */ ::-webkit-scrollbar { width: 1em; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #dc3545; }
Run code

The following example creates a scrollbar with gradient:

/* width */ ::-webkit-scrollbar { width: .8em; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: green; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D)); }
Run code

Custom Scrollbar for a Specific Element

The following example creates a custom scrollbar for a specific element (class="box"):

div { width: 20rem; height: 15rem; overflow: auto; } .box::-webkit-scrollbar { width: .8em; } .box::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } .box::-webkit-scrollbar-thumb { background-color: dodgerblue; }
Run code

Scrollbar Selectors

For webkit browsers (Chrome, Opera, Safari), you can use the following pseudo elements to customize the browser's scrollbar:

  • ::-webkit-scrollbar the scrollbar.
  • ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
  • ::-webkit-scrollbar-thumb the draggable scrolling handle.
  • ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
  • ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
  • ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
  • ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.