Custom Scrollbar Styler

Generate CSS for custom styled scrollbars with track color, thumb color, width, and border radius.

Preview

Scroll me to see the custom scrollbar in action. This container has enough content to trigger scrolling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Settings

CSS Selector

Track Color

Thumb Color

Thumb Hover Color

Width10px

Border Radius5px

All Browsers CSS

/* Firefox */
.custom-scroll {
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
}

/* Chrome, Edge, Safari */
.custom-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

WebKit CSS (Chrome, Edge, Safari)

.custom-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

Standard CSS (Firefox)

.custom-scroll {
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
}

Was this page helpful?

Custom Scrollbar Styler

Related tools