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;
}

Related tools

CSS Gradient GeneratorCSS

Build beautiful CSS gradients visually with a live preview.

Box Shadow GeneratorCSS

Create CSS box-shadow values visually with multiple shadows and live preview.

Border Radius GeneratorCSS

Visual CSS border-radius editor with per-corner control.

Flexbox PlaygroundCSS

Interactive CSS flexbox layout builder with live preview.

CSS Grid GeneratorCSS

Visual CSS Grid layout generator with cell spanning.

CSS Animation GeneratorCSS

Build CSS @keyframes animations visually with live preview.