CSS Scrollbar Styler

Customize scrollbar appearance with CSS.

Scroll content line 1 — preview your custom scrollbar style here.

Scroll content line 2 — preview your custom scrollbar style here.

Scroll content line 3 — preview your custom scrollbar style here.

Scroll content line 4 — preview your custom scrollbar style here.

Scroll content line 5 — preview your custom scrollbar style here.

Scroll content line 6 — preview your custom scrollbar style here.

Scroll content line 7 — preview your custom scrollbar style here.

Scroll content line 8 — preview your custom scrollbar style here.

Scroll content line 9 — preview your custom scrollbar style here.

Scroll content line 10 — preview your custom scrollbar style here.

Scroll content line 11 — preview your custom scrollbar style here.

Scroll content line 12 — preview your custom scrollbar style here.

Scroll content line 13 — preview your custom scrollbar style here.

Scroll content line 14 — preview your custom scrollbar style here.

Scroll content line 15 — preview your custom scrollbar style here.

Scroll content line 16 — preview your custom scrollbar style here.

Scroll content line 17 — preview your custom scrollbar style here.

Scroll content line 18 — preview your custom scrollbar style here.

Scroll content line 19 — preview your custom scrollbar style here.

Scroll content line 20 — preview your custom scrollbar style here.

Width: 10px

Thumb Radius: 5px

Track

Thumb

Hover

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}