elefcode

Custom Scrollbar Styler

Style scrollbars with colour, width, rounded thumbs and hover — CSS that works in Chrome, Safari, Edge and Firefox.

Start from:
Colours
Shape
Technique
Apply to
Preview

Line 1 — scroll down and sideways to try the scrollbar.

Line 2 — scroll down and sideways to try the scrollbar.

Line 3 — scroll down and sideways to try the scrollbar.

Line 4 — scroll down and sideways to try the scrollbar.

Line 5 — scroll down and sideways to try the scrollbar.

Line 6 — scroll down and sideways to try the scrollbar.

Line 7 — scroll down and sideways to try the scrollbar.

Line 8 — scroll down and sideways to try the scrollbar.

Line 9 — scroll down and sideways to try the scrollbar.

Line 10 — scroll down and sideways to try the scrollbar.

Line 11 — scroll down and sideways to try the scrollbar.

Line 12 — scroll down and sideways to try the scrollbar.

Line 13 — scroll down and sideways to try the scrollbar.

Line 14 — scroll down and sideways to try the scrollbar.

Line 15 — scroll down and sideways to try the scrollbar.

Line 16 — scroll down and sideways to try the scrollbar.

Line 17 — scroll down and sideways to try the scrollbar.

Line 18 — scroll down and sideways to try the scrollbar.

Line 19 — scroll down and sideways to try the scrollbar.

Line 20 — scroll down and sideways to try the scrollbar.

Line 21 — scroll down and sideways to try the scrollbar.

Line 22 — scroll down and sideways to try the scrollbar.

Line 23 — scroll down and sideways to try the scrollbar.

Line 24 — scroll down and sideways to try the scrollbar.

Line 25 — scroll down and sideways to try the scrollbar.

Line 26 — scroll down and sideways to try the scrollbar.

Line 27 — scroll down and sideways to try the scrollbar.

Line 28 — scroll down and sideways to try the scrollbar.

Line 29 — scroll down and sideways to try the scrollbar.

Line 30 — scroll down and sideways to try the scrollbar.

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background-color: #94a3b8;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #64748b;
}

::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

::-webkit-scrollbar-button {
  display: none;
}

/* Firefox. Chrome also understands these, but setting them would switch off
   the ::-webkit-scrollbar rules above, so they apply only where those are missing. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: auto;
    scrollbar-color: #94a3b8 #f1f5f9;
  }
}

Advertisement

Guide

About the Custom Scrollbar Styler

Browsers offer two ways to style scrollbars. The standard properties, scrollbar-color and scrollbar-width, set colours and a thin or normal width in every modern browser. The older ::-webkit-scrollbar pseudo-elements allow much more — exact width, rounded thumbs, hover colours — but only in Chromium browsers and Safari.

The detailed output uses the pseudo-elements and falls back to the standard properties only in browsers that lack them, so everyone gets the best version their browser supports.

Why not just set both?

Since Chrome 121, setting scrollbar-color or scrollbar-width on an element makes Chrome ignore its ::-webkit-scrollbar rules. Wrapping the standard properties in @supports not selector(::-webkit-scrollbar) keeps them for Firefox without switching off the detailed styling elsewhere.

Keep scrollbars usable

A scrollbar is a control as well as an indicator. Keep enough contrast between thumb and track, and avoid making it so thin that it is hard to grab with a mouse. Hiding scrollbars entirely is best limited to small horizontal strips where swiping is obvious.

How to use it

  1. 1Pick a preset or choose your colours.
  2. 2Set width, radius and spacing.
  3. 3Apply it to the whole page or a class.
  4. 4Copy the CSS into your stylesheet.

Frequently asked questions

Does custom scrollbar CSS work in Firefox?

Firefox supports the standard scrollbar-color and scrollbar-width properties, so you get your colours and a thin or normal width, but not rounded thumbs or hover colours.

How do I hide the scrollbar but keep scrolling?

Use scrollbar-width: none plus ::-webkit-scrollbar { display: none } — the “Hide scrollbar” tab has the snippet.

How do I style the scrollbar of one element only?

Choose “Elements with a class”, then add that class to any scrollable element.

Why does the page scrollbar not change?

For the whole page, the rules must target html (as generated). Some layouts scroll a wrapper element instead; apply the class to that element.

Do custom scrollbars work on phones?

Mobile browsers use thin overlay scrollbars that appear only while scrolling, and mostly ignore these styles.

Related tools

Glassmorphism GeneratorColor Palette GeneratorCSS Button GeneratorContrast Checker