CSS Scrollbar Generator

Style custom scrollbars for Chrome, Edge, Safari and Firefox — width, colours, hover and rounded thumb — with a live preview.

How do I style the scrollbar with CSS?

Choose the width, track colour, thumb colour, hover colour, corner radius and the element to style, try the result in a scrollable preview box, and copy CSS that uses the standard scrollbar-width and scrollbar-color properties plus ::-webkit-scrollbar rules for Safari and older Chrome.

Browser support

Firefox and Chrome/Edge 121+ use scrollbar-color and scrollbar-width (colours and thin/auto only).
Safari and older Chromium use ::-webkit-scrollbar, which also allows exact width, radius and hover.

Accessibility

Keep a clear contrast between thumb and track and do not make scrollbars too thin to grab on touch screens and for users with motor difficulties.

Frequently asked questions

Can I hide the scrollbar?

Use scrollbar-width: none and ::-webkit-scrollbar { display: none } — but keep content scrollable.

Why does the radius not show in Chrome?

When scrollbar-color is supported, Chrome ignores the ::-webkit-scrollbar rules.

Is it free?

Yes.