SEOlust logo SEOlust
CSS & Design Generators

CSS Scrollbar Generator

Style custom scrollbars with CSS — width, track/thumb colors, and radius, with a live scrollable preview and cross-browser (WebKit + Firefox) code. Free.

All tools
Scroll me to see the custom scrollbar.

💡 How to use

  • Style the scrollbar and scroll the preview panel to test it.
  • The output includes both the WebKit (::-webkit-scrollbar) and standard (scrollbar-color) syntax.
  • Apply the rules to a scrollable element, or to html for the whole page.

Free CSS Scrollbar Generator

Style custom scrollbars with CSS and copy the code in one click. Set the width, track and thumb colors, hover color, and corner radius, then scroll a live preview to test it — and get both the WebKit and standard cross-browser syntax. Free, no sign-up, runs in your browser.

Can you style scrollbars with CSS?

Yes. Modern browsers let you customise the scrollbar's size and colors so it matches your design instead of using the default gray. There are two syntaxes: the older WebKit pseudo-elements (::-webkit-scrollbar and friends) supported by Chrome, Edge, and Safari, and the newer standard properties scrollbar-width and scrollbar-color supported by Firefox and increasingly everywhere. This generator produces both so your styled scrollbar works across browsers.

How to use the scrollbar generator

It is instant:

  • Set the scrollbar width and the track, thumb, and hover colors.
  • Adjust the corner radius of the thumb and track.
  • Scroll the live preview to see the result.
  • Copy the CSS and apply it to a scrollable element or the whole page.

The two scrollbar syntaxes explained

Each browser family reads a different set of rules:

  • ::-webkit-scrollbar sets the width/height of the bar.
  • ::-webkit-scrollbar-track styles the groove the thumb slides in.
  • ::-webkit-scrollbar-thumb styles the draggable handle, with a :hover state.
  • scrollbar-width (thin/auto) and scrollbar-color (thumb track) cover Firefox and the standard.

Where to apply the styles

Attach the rules to whichever element scrolls. For a single scrollable panel — a sidebar, a code block, a chat window — give it a class and apply the rules to that class, as this tool does with .scroll-area. To restyle the main page scrollbar, apply the rules to the html element instead. Remember the element also needs overflow set (for example overflow-y: auto) for a scrollbar to appear in the first place.

Keep custom scrollbars usable

A styled scrollbar should still be easy to see and grab. Keep enough contrast between the thumb and the track so users can tell where the handle is, and do not make the bar so thin that it is hard to click — a hover color that darkens the thumb helps signal interactivity. On touch devices scrollbars are often hidden anyway, so never rely on a visible scrollbar as the only cue that content scrolls.

Pro tip

Match the thumb color to your brand accent and the track to a subtle tint of your background for a cohesive look, and keep the same scrollbar style across all scrollable areas for consistency. If you support dark mode, define separate thumb and track colors for each theme. Pair this with our CSS Color Converter to fine-tune the shades.

FAQ

Is this CSS Scrollbar Generator free?
Yes. It is completely free, runs in your browser, and requires no account or sign-up.
How do I style a scrollbar in CSS?
Use the ::-webkit-scrollbar pseudo-elements for Chrome, Edge, and Safari, and scrollbar-width / scrollbar-color for Firefox. This tool generates both so it works across browsers.
Does custom scrollbar styling work in Firefox?
Yes, via the standard scrollbar-width and scrollbar-color properties, which the generator includes alongside the WebKit rules.
How do I style only one scrollable element?
Give that element a class and apply the scrollbar rules to the class, as the tool does with .scroll-area. To style the whole page, apply the rules to the html element.
Why isn't my scrollbar showing up?
The element needs overflow (for example overflow-y: auto) and enough content to scroll. Without overflow, no scrollbar appears to style.
Can I make the scrollbar thinner?
Yes. Reduce the width in the WebKit rules and set scrollbar-width: thin for Firefox. Keep it large enough to click comfortably.
Do custom scrollbars work on mobile?
Mobile browsers usually hide scrollbars entirely, so custom styling mainly affects desktop. Never rely on a visible scrollbar as the only sign that content scrolls.

Related tools

Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.

  • CSS Box-Shadow Generator — Design CSS box-shadows visually with live preview — control offset, blur, spread, opacity, color, and inset, …
  • CSS Gradient Generator — Create CSS gradients visually and copy the code in one click — linear, radial, and conic gradients with unlim…
  • CSS Loader & Spinner Generator — Create pure-CSS loading spinners and animations — spinner, dual-ring, pulse, and dots styles with adjustable …
  • CSS Flexbox Generator — Build flexbox layouts visually — set direction, justify, align, wrap, and gap with a live preview, then copy …
  • CSS Text-Shadow Generator — Add shadows and glow effects to text visually — adjust offset, blur, opacity, and color with a live preview a…