Tiny Web Tools

CSS Scrollbar Generator

Style custom scrollbars in CSS — width, colours, and thumb radius — with a live scrollable preview and presets, then copy the WebKit and Firefox CSS.

Scroll the box to see the scrollbar:

1. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

2. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

3. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

4. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

5. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

6. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

7. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

8. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

9. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

10. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

11. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

12. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

13. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

14. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

15. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

16. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

17. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

18. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

19. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

20. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

21. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

22. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

23. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

24. The quick brown fox jumps over the lazy dog. Style this scrollbar with the controls on the right and copy the CSS when you like it.

Presets
CSS

Replace .scrollbar with your element’s selector (or use html for the whole page).

The CSS Scrollbar Generator lets you design a custom scrollbar and copy the CSS for both Chromium browsers and Firefox. Set the scrollbar width, the track and thumb colours, a hover colour, and the thumb’s corner radius, then scroll the live preview to see exactly how it looks.

It outputs the WebKit ::-webkit-scrollbar pseudo-elements (for Chrome, Edge, and Safari) and the standard scrollbar-width / scrollbar-color properties (for Firefox), so your scrollbar is styled consistently across modern browsers. Everything runs in your browser.

How to use the scrollbar generator

  1. Pick a preset or set the width, track, thumb, and hover colours, and the thumb radius.
  2. Scroll the preview box to check the look and the hover state.
  3. Copy the generated CSS into your stylesheet.
  4. Replace the .scrollbar selector with your scrollable element’s class, or use html to style the whole page.

Two APIs: WebKit and standard

Scrollbar styling currently uses two systems. Chromium browsers and Safari support the ::-webkit-scrollbar pseudo-elements, which let you style the track, the thumb, and states like :hover in detail. Firefox uses the standard properties scrollbar-width (auto, thin, or none) and scrollbar-color (thumb colour then track colour). This tool writes both so your scrollbar looks right in all of them; the generated width maps to “thin” in Firefox for slimmer bars.

Where scrollbar styles apply

Scrollbar styles apply to whichever element actually scrolls. Put the class on a specific scrollable container to style just that box, or on the html element to style the page’s main scrollbar. Note the element must be able to scroll (its content overflows and overflow is set to auto or scroll) for the scrollbar to appear at all.

Usability tips

Keep enough contrast between the thumb and track so the scrollbar is easy to see and grab, and avoid making the thumb too thin to click comfortably — around 8–12px is a good range. On macOS, overlay scrollbars are hidden until you scroll unless the element uses these WebKit styles, which force a classic always-visible scrollbar. Very aggressive restyling can hurt accessibility, so keep the scrollbar recognisable as a scrollbar.

Frequently Asked Questions

How do I style a scrollbar in CSS?

Use the ::-webkit-scrollbar pseudo-elements for Chromium and Safari, and the scrollbar-width and scrollbar-color properties for Firefox. This generator writes both from your chosen width, colours, and radius.

Does custom scrollbar CSS work in Firefox?

Yes, via the standard scrollbar-width and scrollbar-color properties, which the generator includes. Firefox does not support the fine-grained ::-webkit-scrollbar parts, so it uses the standard properties instead.

How do I style only one element’s scrollbar?

Apply the class to that scrollable element and keep the selector specific. Use the html selector instead if you want to style the whole page’s scrollbar.

Why is my scrollbar not showing?

The element must actually scroll — its content has to overflow and its overflow must be auto or scroll. Without overflow there is no scrollbar to style.

Can I hide the scrollbar completely?

Yes — set scrollbar-width: none in Firefox and ::-webkit-scrollbar { display: none } in Chromium. Hiding it removes a useful affordance, so do it sparingly and keep the area scrollable.

Related CSS Generators

Box Shadow Generator

Design CSS box shadows visually with a live preview — layer multiple shadows, set offset, blur, spread, colour, and inset, then copy the CSS or Tailwind.

Border Radius Generator

Round corners visually with a live preview — set each corner in px or %, link or unlink corners, and copy the CSS or Tailwind.

Cubic Bezier Generator

Craft CSS easing curves by dragging the cubic-bezier handles, with presets and a live animation preview. Copy the timing function as CSS or Tailwind.