Scrollbar

Scrollbar.app is a simple online editor for web developers to interactively design and generate custom CSS scrollbars.

🚀 Overview

Scrollbar.app is a lightweight, open-source web application that enables users to visually customize browser scrollbars using CSS properties.

It solves the challenge of styling native scrollbars, which traditionally requires knowledge of specific, often vendor-prefixed CSS rules like ::-webkit-scrollbar pseudo-elements and emerging standards such as scrollbar-color and scrollbar-width. The tool provides a live preview and instant CSS generation, saving developers time on trial-and-error.

It's built for frontend developers, UI/UX designers, and anyone working on web projects who wants polished scrollbar designs without deep CSS expertise.

Henri Parviainen created it as a handy utility to streamline scrollbar customization, making it quick and intuitive.

✨ Key Features

Visual editor for adjusting scrollbar width, track/thumb colors, borders, padding, and hover/active states
Support for WebKit-specific pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, etc.) and standard properties (scrollbar-color, scrollbar-width, scrollbar-gutter)
Real-time live preview of the customized scrollbar in different modes
One-click copy to clipboard for the complete, cross-browser compatible CSS code
Light/Dark mode toggle; notes on browser support (e.g., limited Firefox compatibility)

🛠 Tech Stack

Frontend: Vue 3, Vite, CSS, JavaScript
Backend: None (purely client-side)
Database: None
Auth: None
Hosting: Custom deployment (accessible at scrollbar.app)

👥 Who Is This For?

This project is useful for:

Developers who want to easily customize scrollbars without manual CSS experimentation
Teams looking for quick, professional UI tweaks
Indie makers building modern websites and apps needing refined scrolling experiences