How to change the scrollbar color in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Scroll bar styles are a super easy thing to customize in your Squarespace site and this tutorial will teach you how!

Details are key to creating a cohesive brand, and a scroll bar can easily be overlooked.

This tutorial will teach you how to create a custom scrollbar color so you can really make your Squarespace site unique!

Here is the code from this tutorial:

Be sure to adjust the color, border, and size to suit your style, and keep a high contrast!

::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
background: #e5f5f6;
border-left: 1px solid #333
}

::-webkit-scrollbar-thumb {
background-color: #333;
border-radius: 1rem;
}