SolutionsCase StudiesAI ToolsResourcesAboutContact
Get Your Free AI Automation Audit Book a Free 30-Minute Strategy Call
Playground~/frontend Open editor

~/css/scrollbar-generator

CSS Scrollbar Generator

GeneratorRuns in your browserFree · no sign-up

Design a custom scrollbar and test it in a scrollable preview: set the width, track colour, thumb colour, hover colour and corner radius. The CSS covers WebKit browsers and the standard Firefox properties in one block.

RelatedCSS Button GeneratorCSS Cursor GeneratorCSS Gradient GeneratorCSS Color Palette GeneratorCSS Box Shadow GeneratorCSS Glassmorphism Generator

Scroll this box to see the scrollbar.

Custom scrollbars should stay easy to find and easy to grab. A thumb that blends into its track looks tidy but leaves people unsure whether the area scrolls at all.

Keep the thumb noticeably darker or lighter than the track, and make it wide enough to grab with a mouse.

On touch screens most browsers hide the scrollbar until you scroll, so these styles mainly affect desktop.

Firefox supports only the standard scrollbar-color and scrollbar-width properties, so its scrollbar is simpler than the WebKit version.

That is fine: the standard properties are the future, and the WebKit pseudo-elements fill the gap for now.

CSS

Using the CSS Scrollbar Generator

Two ways to style scrollbars

Chrome, Edge and Safari use the ::-webkit-scrollbar pseudo-elements, which allow full control over width, colours and radius. Firefox and the CSS standard use scrollbar-width and scrollbar-color, which are simpler. The generated CSS includes both, so every browser gets a styled scrollbar.

Keep it usable

A scrollbar is a control, not just decoration. Keep the thumb clearly visible against the track and wide enough to grab. Very thin, low-contrast scrollbars look sleek but frustrate people with less precise mice and anyone with low vision.

Scoped or global

Styling only one scrolling panel, such as a sidebar or code block, is usually better than changing the scrollbar for the whole page. Tick "Apply to the whole page" if you do want a site-wide style.

Mobile behaviour

Phones and tablets use overlay scrollbars that appear only while scrolling and mostly ignore these styles. Custom scrollbars are a desktop refinement.

Frequently asked questions

Why does Firefox look different?

Firefox only supports the standard properties: a thumb colour, a track colour and a thin or auto width. It does not support radius or hover colours.

Can I hide the scrollbar but keep scrolling?

Yes, with scrollbar-width: none and ::-webkit-scrollbar { display: none }, but make sure people can still tell the area scrolls.

Does this affect accessibility?

Only if the thumb becomes hard to see. Keep strong contrast between thumb and track.