Free Tools/CSS Scrollbar Styler

CSS Scrollbar Styler

Style custom scrollbars with CSS for WebKit browsers. Set width, track and thumb colours.

Width (px)

Border radius (px)

Track color

Thumb color

Thumb hover

Target selector

Preview

Scroll content line 1

Scroll content line 2

Scroll content line 3

Scroll content line 4

Scroll content line 5

Scroll content line 6

Scroll content line 7

Scroll content line 8

Scroll content line 9

Scroll content line 10

Scroll content line 11

Scroll content line 12

Scroll content line 13

Scroll content line 14

Scroll content line 15

Scroll content line 16

Scroll content line 17

Scroll content line 18

Scroll content line 19

Scroll content line 20

CSS

body {
  scrollbar-width: thin;
  scrollbar-color: #00B4A6 #1a1a2e;
}

/* Chrome, Edge, Safari */
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track {
  background: #1a1a2e;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb {
  background: #00B4A6;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #00d4c4;
}

CSS Tools

CSS without the guesswork

Visual generators and calculators for gradients, shadows, grid, flexbox and more — each with a live preview and copy-ready CSS for the result.

Related CSS tools

📐

CSS Unit Converter

Convert between px, rem, em, pt, vw and vh with configurable base font size and viewport.

Use tool →🌈

CSS Gradient Generator

Build linear and radial CSS gradients visually with colour stops, angle control and a live preview.

Use tool →🔲

CSS Box Shadow Generator

Build multi-layer CSS box shadows visually with sliders for offset, blur, spread and colour.

Use tool →⌒

CSS Border Radius Generator

Build border-radius values visually with per-corner sliders, presets and a live preview.

Use tool →

Explore more from Dino Media: All Free Tools · Our Services · Digital Glossary · Our Work

See Our Work

Like our eye for detail?

We design and build pixel-perfect, high-performing websites for ambitious UK businesses. Take a look at what we have created.

See Our Portfolio →