Scrollbar Styler
Design custom scrollbar styles for webkit and Firefox browsers.
Live preview
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
25. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
27. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
28. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
30. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
::-webkit-scrollbar
::-webkit-scrollbar
::-webkit-scrollbar
scrollbar-width, scrollbar-color only
Tip: Firefox only supports scrollbar-width (thin/auto) and scrollbar-color. For cross-browser consistency, include both webkit and Firefox styles. Use scrollbar-gutter: stable to prevent layout shift.
Note: Firefox ignores border-radius, border, and hover color customization. The live preview above uses webkit styles. Firefox users will see a simplified scrollbar with your track and thumb colors only.
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #1E1E2E;
}
::-webkit-scrollbar-thumb {
background: #3B82F6;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #2563EB;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #3B82F6 #1E1E2E;
}About this tool
- 1
Choose a style preset
Start with a thin, rounded, or hidden scrollbar preset as a baseline.
- 2
Customize colors
Set the track background, thumb color, and thumb hover color to match your design.
- 3
Adjust dimensions
Control the scrollbar width, thumb border-radius, and track padding.
- 4
Copy the CSS
Export both the WebKit (Chrome/Safari/Edge) and Firefox scrollbar CSS.
- Use scrollbar-width: thin in Firefox for a subtle, native-looking thin scrollbar.
- WebKit scrollbar styling uses pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track).
- Always provide both WebKit and Firefox syntax for cross-browser support.
- Avoid hiding scrollbars entirely - users need visual feedback that content is scrollable.
- Visual preview with scrollable sample content
- WebKit pseudo-element and Firefox scrollbar-color output
- Thumb and track color customization
- Width, border-radius, and hover state controls
- Preset styles for minimal, rounded, and hidden scrollbars
- Match scrollbar appearance to your website's dark or light theme.
- Create sleek, minimal scrollbars for sidebar navigation panels.
- Design branded scrollbar styles for embedded content widgets.
- Hide default scrollbars on overlay menus while keeping scroll functionality.