Создать Пользовательское CSS scrollbar styles with live Предпросмотр. Adjust Ширина, colors, track, thumb, and Наведение effects. Сгенерировать cross-браузер CSS for WebKit and Firefox instantly. 100% на стороне клиента.
Scroll this area to see your Пользовательское scrollbar Стиль Вход action. This demo container shows exactly how the generated CSS will look when applied to scrollable Контент.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
/* Scrollbar styles will appear here */The CSS Scrollbar Генератор creates Пользовательское scrollbar styles using WebKit and standard scrollbar CSS properties. Customize every aspect из your scrollbar — Ширина, colors, track, thumb, and Наведение effects — and get production-ready cross-браузер CSS instantly. This Инструмент supports both WebKit browsers (Chrome, Safari, Edge) and Firefox with the scrollbar-Цвет and scrollbar-Ширина properties. Все Обработка happens Вход your браузер — Нет data is sent anywhere.
The generated CSS includes both WebKit scrollbar properties (for Chrome, Safari, Edge) and standard scrollbar-Цвет/scrollbar-Ширина properties (for Firefox). Browsers that do Не support Пользовательское scrollbars (like some older browsers) will simply display their По умолчанию scrollbar. This is a progressive enhancement approach.
Absolutely! The generated CSS is completely Бесплатно to use Вход personal, commercial, and open-source projects without any attribution Обязательно. The styles use standard CSS properties supported by Все modern browsers.
To apply the scrollbar styles to your entire page, use the ::-webkit-scrollbar selector on the HTML or body element. The generated CSS includes both HTML and .scroll-container selectors so you can easily adapt it to your needs.
Firefox uses the scrollbar-Ширина and scrollbar-Цвет properties from the CSS Scrollbar Module Level 1 specification, while WebKit browsers (Chrome, Safari) use the ::-webkit-scrollbar pseudo-elements. Our Генератор produces both sets из rules for maximum cross-браузер compatibility.