CSS Scrollbar Customizer

Design custom scrollbars for Webkit browsers (Chrome, Edge, Safari).

Back to Design & UI

CSS Scrollbar Customizer

Design custom scrollbars for Webkit browsers (Chrome, Edge, Safari)

Width: 12px

Border Radius: 10px

Thumb Color

Track Color

Border Width: 3px

Border Color

Note: Custom scrollbars using ::-webkit-scrollbar are only supported in Chromium-based browsers and Safari. For Firefox, use scrollbar-width and scrollbar-color.

Scroll Area Preview

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.

CSS Snippet

/* Width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f4f4f5;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.85);
}

About CSS Scrollbar Customizer

Style your scrollbars to match your brand. Customize thumb and track colors, rounded corners, and borders for a cohesive browsing experience.

Something not working right?

Found a bug or have a suggestion to improve the CSS Scrollbar Customizer? Let us know and we'll fix it!