The problem
You want to customize the appearance of scrollbars to match your website design.
The solution
/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1a1a2e;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3a7bff, #8b5cf6);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #5a8eff, #a78bfa);
}
/* Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #3a7bff #1a1a2e;
}See it live
Put it to work
<div class="custom-scrollbar" style="height: 300px; overflow-y: auto;">
<p>Long content that needs scrolling...</p>
</div>Worth knowing
Firefox uses scrollbar-width and scrollbar-color. Webkit browsers use pseudo-elements for more control.