How to create: Custom scrollbar

Learn how to create a custom scrollbar using CSS.

Custom scrollbar

Try it yourself

Try it yourself

Note:Firefox or versions of Edge prior to 79 do not support custom scrollbars.

How to create a custom scrollbar

Chrome, Edge, Safari, and Opera support non-standard ::-webkit-scrollbar A pseudo-element that allows us to modify the appearance of the browser's scrollbar.

The following example creates a scrollbar with a width of 10px, featuring a grey track/color and a dark grey (#888) slider:

/* Width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Slider on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Try it yourself

This example creates a scrollbar with a shadow effect:

Example

/* Width */
::-webkit-scrollbar {
  width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Try it yourself

Scrollbar selector

For webkit browsers, you can use the following pseudo-elements to customize the browser's scrollbar:

::-webkit-scrollbar The scrollbar itself.
::-webkit-scrollbar-button The buttons on the scrollbar (up and down arrows).
::-webkit-scrollbar-thumb The draggable scrollbar slider.
::-webkit-scrollbar-track The track (progress bar) of the scrollbar.
::-webkit-scrollbar-track-piece The part of the track (progress bar) not covered by the slider.
::-webkit-scrollbar-corner The bottom corner of the scrollbar, where the horizontal and vertical scrollbars intersect.
::-webkit-resizer A draggable resize handle that appears at the bottom corner of some elements.