How I Fixed Chrome's Ugly Scrollbar (And Made It Actually Look Good)

If you've ever switched between Firefox and Chrome and thought "why does Chrome's scrollbar look so chunky and outdated?" — you're not alone. I went down a rabbit hole trying to fix this, and here's everything I learned.

The Problem

Chrome's default scrollbar is wide, grey, and just... ugly. Firefox has this sleek, minimal thin bar that barely takes up space. Chrome? It looks like it's straight out of Windows XP.

I wanted something clean — thin, dark, and ideally auto-hiding when I'm not scrolling.

Step 1: Install Stylus

The cleanest way to fix this without installing sketchy extensions is Stylus — a browser extension that lets you inject custom CSS into any website.

👉 Install Stylus from the Chrome Web Store

Once installed, click the Stylus icon → Write new style → set it to apply to Everything.

Step 2: The CSS

Paste this into the editor:

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #606060;
}

Hit Save. That's it.

This gives you a 3px thin scrollbar with a transparent track and a subtle dark thumb — almost identical to Firefox's native scrollbar.

What I Tried That Didn't Work

Hiding it completely

My first instinct was to just hide the scrollbar entirely:

::-webkit-scrollbar {
  display: none !important;
}

This worked on most sites but YouTube ignored it because it uses its own custom scrollbar on the html element. I then tried:

html, body, * {
  scrollbar-width: none !important;
}

That nuked it everywhere — but then I had no scrollbar at all, which is worse.

Sites with custom scrollbars

Some sites like Kairu build their own scrollbars using styled div elements, so no amount of CSS will override them. That's just how it is.

Bonus: Auto-Hide the Scrollbar

CSS alone can't auto-hide a scrollbar based on mouse inactivity — that requires JavaScript. For this, I'd recommend the Autohide Scrollbar extension from the Chrome Web Store. It hides the bar when you stop scrolling and brings it back when you need it.

Final Result

A clean, minimal 3px scrollbar that looks right at home on dark sites like YouTube, and doesn't get in the way on light ones. Took about 5 minutes to set up.

Sometimes the smallest UI fixes make the biggest difference in how enjoyable your browser feels day-to-day.