CSS Scrollbar Generator
// Customize scrollbar styles with CSS
Scrollable content line 1
Scrollable content line 2
Scrollable content line 3
Scrollable content line 4
Scrollable content line 5
Scrollable content line 6
Scrollable content line 7
Scrollable content line 8
Scrollable content line 9
Scrollable content line 10
Scrollable content line 11
Scrollable content line 12
Scrollable content line 13
Scrollable content line 14
Scrollable content line 15
Scrollable content line 16
Scrollable content line 17
Scrollable content line 18
Scrollable content line 19
Scrollable content line 20
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #1a1a2e;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: #06b6d4;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #0891b2;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #06b6d4 #1a1a2e;
}#About CSS Scrollbar Generator
Free online CSS scrollbar style generator. Customize scrollbar track, thumb, and hover colors with live preview for WebKit browsers. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
Do custom scrollbars work in all browsers? ▾
Custom scrollbar styles using ::-webkit-scrollbar work in Chrome, Edge, Safari, and Opera. Firefox supports scrollbar-color and scrollbar-width properties.
What parts of the scrollbar can I customize? ▾
You can customize the scrollbar track (background), thumb (the draggable part), thumb hover state, width, and border-radius.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-scrollbar-generator" width="100%" height="500" frameborder="0" title="CSS Scrollbar Generator"></iframe>