FreeDev Tools

CSS Scrollbar Generator

Style custom scrollbars — width, colors, radius — with WebKit and Firefox syntax.

Scroll this box to see the custom scrollbar in action.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore.

Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit in voluptate.

Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim.

/* WebKit (Chrome, Edge, Safari) */
.scrollbar-demo::-webkit-scrollbar {
  width: 10px;
}
.scrollbar-demo::-webkit-scrollbar-track {
  background: #e2e8f0;
}
.scrollbar-demo::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 6px;
}
.scrollbar-demo::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

/* Firefox */
.scrollbar-demo {
  scrollbar-width: auto;
  scrollbar-color: #3b82f6 #e2e8f0;
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Tune width and colors

    Thumb, hover, track colors, and corner radius.

  2. 2

    Scroll the preview

    A live scrollable box shows the result.

  3. 3

    Copy dual-engine CSS

    WebKit pseudo-elements plus Firefox properties.

Frequently Asked Questions

Two syntaxes: ::-webkit-scrollbar pseudo-elements for Chrome/Edge/Safari (full control), and the scrollbar-width/scrollbar-color properties for Firefox (simpler). The generator emits both together.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually