Create a Custom Scrollbar Experience

Build your very own custom scrollbar to give your website a unique appearance.

Copy Code

<style>
/* Change the appearance of the entire scrollbar */
::-webkit-scrollbar {
   width: 8px;
   padding: 2px;
}

/* Change the appearance of the slider or track */
::-webkit-scrollbar-track {
   background: #111111;
   border-radius: 16px;
}

/* Change the appearance of the handle */
::-webkit-scrollbar-thumb {
   background: #202020;
   border-radius: 16px;
}

/* Change the color of the handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #00FFFF;
}
</style>

This ones super easy.

Just copy this code, paste it in the <head> tag in the custom code section of your project's settings, adjust everything to fit your needs, and save it.

Once you publish the website you will see you now have a custom scrollbar!