CSS Scrollbar Styler

Create beautiful custom scrollbars with ease

Styling Options
Size Settings
5px 10px 30px
5px 10px 30px
Track Styling
Thumb Styling
0px 10px 20px
Hover & Active Effects
0ms 300ms 1000ms
Advanced Options
Live Preview

Scrollbar Preview

Scroll down to see your custom scrollbar in action!

Vertical Scrolling

This is a preview of your vertical scrollbar styling.

Horizontal Scrolling

This is a preview of your horizontal scrollbar styling. It extends beyond the visible area to demonstrate the horizontal scrollbar.

Customization Tips
  • Adjust the width and height sliders to change scrollbar dimensions
  • Try different color combinations for the track and thumb
  • Enable hover effects to see how the scrollbar reacts on hover
  • Experiment with border-radius for rounded corners
About CSS Scrollbars

Scrollbar styling is primarily done using the following CSS pseudo-elements:

  • ::-webkit-scrollbar - The entire scrollbar
  • ::-webkit-scrollbar-track - The track (progress bar) of the scrollbar
  • ::-webkit-scrollbar-thumb - The draggable scrolling handle

For Firefox, you'll need to use scrollbar-width and scrollbar-color properties.

Browser Compatibility

Custom scrollbars are well-supported in modern browsers:

  • Chrome - Full support
  • Edge - Full support
  • Safari - Full support
  • Firefox - Basic support with scrollbar-width and scrollbar-color
  • Opera - Full support
Generated CSS Code