Skip to content
ToolsOnDuty - free online tools
CSS & Design

Custom Scrollbar Generator

Style a custom scrollbar and copy the CSS for Chrome and Firefox.

Free foreverRuns in your browserNo sign-up

Scrollable line 1 - scroll to see the custom scrollbar.

Scrollable line 2 - scroll to see the custom scrollbar.

Scrollable line 3 - scroll to see the custom scrollbar.

Scrollable line 4 - scroll to see the custom scrollbar.

Scrollable line 5 - scroll to see the custom scrollbar.

Scrollable line 6 - scroll to see the custom scrollbar.

Scrollable line 7 - scroll to see the custom scrollbar.

Scrollable line 8 - scroll to see the custom scrollbar.

Scrollable line 9 - scroll to see the custom scrollbar.

Scrollable line 10 - scroll to see the custom scrollbar.

Scrollable line 11 - scroll to see the custom scrollbar.

Scrollable line 12 - scroll to see the custom scrollbar.

Scrollable line 13 - scroll to see the custom scrollbar.

Scrollable line 14 - scroll to see the custom scrollbar.

Scrollable line 15 - scroll to see the custom scrollbar.

Scrollable line 16 - scroll to see the custom scrollbar.

Scrollable line 17 - scroll to see the custom scrollbar.

Scrollable line 18 - scroll to see the custom scrollbar.

Scrollable line 19 - scroll to see the custom scrollbar.

Scrollable line 20 - scroll to see the custom scrollbar.

/* Chrome, Edge, Safari */
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
  background: #E2E8F0;
  border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: #1B5DF5;
  border-radius: 8px;
}
/* Firefox */
.scroll-area {
  scrollbar-color: #1B5DF5 #E2E8F0;
  scrollbar-width: thin;
}

About the Custom Scrollbar Generator

Browsers let you restyle scrollbars with ::-webkit-scrollbar and the scrollbar-color property, but the syntax differs between engines.

This tool lets you set the width, track and thumb colours and radius, preview a scrollable box, and copy CSS that covers Chrome, Edge, Safari and Firefox.

It runs in your browser.

Key features

  • Width, radius and colours
  • Live scrollable preview
  • Chrome and Firefox rules
  • Copy the CSS

How to use

  1. 1Set the width, radius and colours.
  2. 2Scroll the preview box.
  3. 3Copy the CSS.

Examples

Slim blue scrollbar
Output: ::-webkit-scrollbar-thumb { background: #1B5DF5; border-radius: 8px; }

A coloured, rounded thumb gives the scrollbar a custom look.

Frequently asked questions

Does this work in all browsers?
The output includes ::-webkit-scrollbar for Chrome, Edge and Safari, plus scrollbar-color and scrollbar-width for Firefox.
Can I hide the scrollbar?
Yes, in your own CSS, but keep it visible where users need to know content is scrollable, for usability.
Why doesn't Firefox show the rounded thumb?
Firefox only supports colour and thin/auto width via scrollbar-color and scrollbar-width, not a custom radius.

Related tools