Custom CSS scrollbar generator

Replace the default gray scrollbar with one that matches your site’s colors: adjust width, colors, and corner rounding, preview it live, then copy the ready-to-use CSS code. Everything is calculated locally in your browser.

Examples:

Width: 10px

Roundness: 8px

Track color

Thumb color

Hover color

Scrollable content line #1 — scroll to see the scrollbar.

Scrollable content line #2 — scroll to see the scrollbar.

Scrollable content line #3 — scroll to see the scrollbar.

Scrollable content line #4 — scroll to see the scrollbar.

Scrollable content line #5 — scroll to see the scrollbar.

Scrollable content line #6 — scroll to see the scrollbar.

Scrollable content line #7 — scroll to see the scrollbar.

Scrollable content line #8 — scroll to see the scrollbar.

Scrollable content line #9 — scroll to see the scrollbar.

Scrollable content line #10 — scroll to see the scrollbar.

Scrollable content line #11 — scroll to see the scrollbar.

Scrollable content line #12 — scroll to see the scrollbar.

The preview uses the ::-webkit-scrollbar properties (Chrome, Edge, Safari) and scrollbar-color (Firefox); the rendering may vary slightly depending on your browser.

CSS code

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

How it works

There is no single standard CSS property for styling a scrollbar: Chromium-based browsers (Chrome, Edge, Safari) use the ::-webkit-scrollbar pseudo-elements, while Firefox uses the scrollbar-width and scrollbar-color properties. This tool generates both at once, in a CSS block scoped to a class, so the result applies only to the container you target rather than the whole page.

How do I apply this code to my own container?

Copy the generated CSS, rename the byteryo-custom-scrollbar class according to your naming convention, then add this class to the HTML element whose scrollbar you want to customize (a div with overflow: auto or overflow: scroll, for example).

Will the rendering be identical in all browsers?

No: Firefox only accepts the width (thin or auto) and colors via scrollbar-color, without rounded corners or a separate hover color, whereas Chromium-based browsers allow finer control. The generated code covers the best possible rendering on each engine, but a slight visual difference between browsers remains normal.

The CSS code is composed entirely in your browser: no data is sent to a server during generation.