Preview

Custom Scrollbar Preview

Scroll down to see your custom scrollbar in action.

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Horizontal scrollbar preview|Scroll left and right|See your custom style|Looking great!

Scrollbar Properties

10px

Standard is 8-12px, thin is 4-6px

Track (Background)

5px

Thumb (Handle)

5px
0px

Options

Remove the up/down arrow buttons (WebKit only)

Presets

Generated CSS

WebKit (Chrome, Safari, Edge)
/* WebKit Scrollbar Styles (Chrome, Safari, Edge) */
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

body::-webkit-scrollbar-button {
  display: none;
}

💡 Scrollbar Styling Tips

Browser Support

WebKit browsers (Chrome, Safari, Edge) support full customization. Firefox only supports width and colors via scrollbar-width and scrollbar-color.

Performance

Custom scrollbars are lightweight and don't impact performance. However, complex styles with gradients may use slightly more GPU.

Accessibility

Ensure sufficient contrast between track and thumb. Very thin scrollbars may be hard for some users to see or grab.

Best Practices

Match scrollbar colors to your site's theme. Use 8-12px width for desktop, consider overlay scrollbars for mobile-first designs.

⚠ Firefox only supports limited scrollbar styling (width and colors). Full customization works in Chrome, Safari, and Edge.

Need Professional Web Design?

Brix340 creates stunning websites with beautiful, consistent styling across all elements.

Get a Free Quote

Rate this tool