# Slim Custom Scrollbar

> Replaces the default browser scrollbar with a thinner one in your brand colors on desktop browsers.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: css, scrollbar, design
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-custom-scrollbar/

## Code

```css
html {
    scrollbar-width: thin;
    scrollbar-color: #2271b1 #f0f0f1;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #2271b1;
    border-radius: 10px;
    border: 2px solid #f0f0f1;
}
```

## Notes

Mobile browsers keep their native overlay scrollbars.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Slim Custom Scrollbar" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/