CSS Custom Scrollbar Styler

Generate cross-browser custom scrollbar CSS (WebKit pseudo-elements + Firefox).

Controls

Scrollbar width: 10px

Track color

Thumb color

Thumb hover

Thumb radius: 8px

Track radius: 8px

Preview & CSS

1. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

2. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

3. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

4. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

5. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

6. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

7. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

8. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

9. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

10. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

11. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

12. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

13. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

14. Scroll inside this box to preview the custom scrollbar. Scroll inside this box to preview the custom scrollbar.

/* WebKit / Blink (Chrome, Safari, Edge) */
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Firefox (standards) */
.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

width 10pxFirefox: thinthumb #94a3b8

.env to JSON

Parse a .env / dotenv file into a JSON object and convert JSON back into .env format, handling quotes, comments, and export prefixes.

Web & Dev

.gitattributes Generator

Generate a .gitattributes file selecting line-ending normalization, binary, LFS and linguist rules from presets.

Web & Dev

.htaccess Redirect Builder

Build Apache .htaccess redirect rules (Redirect, RewriteRule) from source/target URL pairs with status codes.

Web & Dev

Accept-Language / Accept Parser

Parse and sort Accept-Language or Accept headers by quality value (q-factor).

Web & Dev

CSS Custom Scrollbar Styler

Command Palette