Scrollbar Color Change (CSS)

Let’s be honest—default grey scrollbars are a bit… meh. That’s why we gave ours a splash of personality! This custom-colored scrollbar isn’t just pretty—it’s a fun little way to make your site feel more you. It matches your brand’s vibe, adds a pop of color, and keeps everything looking polished from top to bottom (literally).

Think of it like accessorizing your website—just one more detail that makes everything feel complete. Whether visitors are scrolling through your blog, shop, or portfolio, they’ll notice that extra bit of flair. It’s smooth, it’s sleek, and best of all—it blends beautifully with your style. Because every scroll should feel a little special, right?

Getting Started

Want to add this stylish scrollbar to your own website? It’s super simple — you can use your theme Customizer or use a Code Snippet plugin to add the code, make the color changes, and publish. More details can be found below.

✅ Done — super simple!

Code Snippet

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #EDBFAD; /* Secondary color */
}

::-webkit-scrollbar-thumb {
  background-color: #CE5F49; /* Primary color */
  border-radius: 10px;
  border: 3px solid #EDBFAD;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b04f3d; /* Hover effect */
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: #CE5F49 #EDBFAD; /* thumb | track */
}

Where to Add This Code

Here are two easy options:

Option 1: Install WPCode Lite Plugin

This is by far the safest method and is beginner friendly if you’re not used to editing theme files.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install and activate the plugin.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Scrollbar Color Change.”
5. Paste the code above.
6. Change the primary and secondary colors to your own.
7. Choose CSS, not PHP or any other.
8. Save and activate.

Option 2: Customizer

1. Go to the Customizer from your dashboard menu and click Appearance > Customize.
2. In the Customizer sidebar, scroll down and click on Additional CSS.
3. Copy the full code and paste it.
4. Change the primary and secondary colors to your own.
5. Publish.

✅ Done! Scrollbar color is now changed.

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.