Skip to main content
Penguin ToolsPenguin Tools

CSS Scrollbar Generator

Customize CSS scrollbar design with a visual editor. Adjust color, width, border radius, and copy the code directly.

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

Scroll content #1 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #2 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #3 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #4 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #5 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #6 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #7 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #8 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #9 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #10 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #11 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #12 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #13 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #14 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #15 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #16 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #17 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #18 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #19 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #20 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #21 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #22 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #23 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #24 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #25 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #26 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #27 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #28 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #29 - Preview your custom scrollbar. Scroll to see it in action.

Scroll content #30 - Preview your custom scrollbar. Scroll to see it in action.

Share this tool
📖

How to Use

Step 1

Set Style

Set Style

Set scrollbar width, colors, border radius, etc.

Step 2

Preview

Preview

Check the scrollbar appearance in real-time preview

Step 3

Copy CSS

Copy CSS

Copy the generated CSS code

✨

Features

Real-time Preview

Preview the scrollbar in real time as you change settings

Cross-browser Support

Automatically generate CSS for both WebKit and Firefox

Hover & Active States

Customize hover and drag state styles individually

❓

FAQ

Yes, using ::-webkit-scrollbar (Chrome/Safari/Edge) and scrollbar-width/scrollbar-color (Firefox).

🔗Related Tools

🎨
Design Tools

Color Code Converter

Convert between HEX, RGB, and HSL color codes. Use the color picker and real-time preview for intuitive color selection.

🎨
Design Tools

Color Picker

Pick colors intuitively using a color wheel and sliders. Get and copy color codes in HEX, RGB, and HSL formats.

🎨
Design Tools

Image Color Extractor

Automatically detect dominant colors from an image and generate a color palette. You can also click anywhere on the image to pick individual colors.

🎯
Design Tools

Image Average Color Picker

Calculate the average color of an entire image or a selected area. Useful for choosing color schemes or thumbnail background colors.

🌈
Design Tools

CSS Gradient Generator

Visually create CSS gradients with drag controls. Supports linear, radial, and conic gradient types with presets.

🔲
Design Tools

CSS Box Shadow Generator

Visually create CSS box-shadow with sliders. Supports multiple shadows and inset shadows.