Layout & UtilitiesCSS Only: Any Plan

Custom Scrollbar for Squarespace

Browser default scrollbars can look heavy against a carefully designed site. This custom scrollbar snippet slims the scrollbar down and recolors it to match your palette using pure CSS. It covers WebKit browsers like Chrome, Edge, and Safari through the ::-webkit-scrollbar pseudo elements, and Firefox through the standard scrollbar-width and scrollbar-color properties. Because it is CSS only, it works on any Squarespace plan, and rebranding it is just a matter of changing two color values.

The Code

cssCSS (Design > Custom CSS)
/* WebKit browsers: Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0f1219; /* track color, match your page background */
}

::-webkit-scrollbar-thumb {
  background: #3f4754; /* thumb color */
  border-radius: 999px;
  border: 2px solid #0f1219; /* creates padding around the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #5a6373;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #3f4754 #0f1219; /* thumb color, then track color */
}

How to Install It

  1. 1Go to Design > Custom CSS (Website Tools > Custom CSS on newer dashboards).
  2. 2Paste the snippet and swap the hex colors: track to your page background, thumb to a subtle accent.
  3. 3Save and check in Chrome or Edge first; Firefox renders its own thinner version from the last rule.

Compatibility and Plan Requirements

Any Squarespace version, any plan. WebKit styling applies to Chrome, Edge, and Safari; Firefox uses the two standard properties. Browsers that ignore scrollbar styling simply show the default, which is a safe fallback.

This snippet is pure CSS, so it works on any Squarespace plan, including Personal, through the Custom CSS panel. No Business plan needed.

Want This Done For You?

If you would rather not touch code, or you need something bigger than a snippet, I build custom Squarespace features for clients every week: widgets, search and filter tools, integrations, and full sites.

Squarespace Development Services Get in Touch