Custom Scrollbar Effect
Ditch the default grey bar. Use modern CSS to create a sleek, branded scrollbar that fits perfectly with your website's color scheme.
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.
Scroll inside the box above to see the blue custom bar.
Copy the Script
<style>
/* Width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>Frequently Asked Questions
Firefox uses a different standard (`scrollbar-color` and `scrollbar-width`). This specific script uses `::-webkit-scrollbar` which targets Chrome, Edge, and Safari.
Yes. Setting `width: 0px` or `display: none` on the `::-webkit-scrollbar` selector will hide it while still allowing scrolling.
No. This is purely CSS. We include it here because it is a popular visual effect often requested alongside JavaScript UI tools.