Генератор полосы прокрутки CSS
Выберите цвета и форму и прокрутите пример. Код сочетает новые свойства со старой версией для Chrome и Safari.
Как пользоватьсяПолоса прокрутки в цветах сайта
Доступно на: 
Генератор полосы прокрутки CSS: для чего нужен
Полоса прокрутки в цветах бренда придаёт сайту более законченный вид, но CSS изменился: сегодня есть стандартные свойства scrollbar-color и scrollbar-width, которые поддерживают Firefox, Chrome и Edge 121 и Safari 26.2, тогда как старые версии понимают только ::-webkit-scrollbar.
Этот генератор создаёт оба способа, разделённые @supports, как рекомендует документация Chrome, потому что при заданном scrollbar-color Chrome игнорирует старые правила. Вы выбираете цвета дорожки и ползунка, ширину, углы и цвет при наведении и проверяете в примере.
Как пользоваться
- Выберите цвета дорожки и ползунка.
- Настройте ширину и скругление.
- Скопируйте CSS для всей страницы или для блока.
Когда использовать
- Полоса прокрутки в цветах бренда.
- Блоки с прокруткой внутри страницы.
- Панели и системы с тёмной темой.
Частые вопросы
Работает ли во всех браузерах?
Стандартные свойства scrollbar-color и scrollbar-width работают в Firefox, Chrome и Edge начиная с версии 121 и в Safari 26.2. Для более ранних версий код также содержит правила ::-webkit-scrollbar, которые меняют ширину, углы и цвет при наведении мыши.
Почему в коде используется @supports?
В Chrome, если задано scrollbar-color, правила ::-webkit-scrollbar игнорируются. @supports применяет стандартные свойства только там, где они есть, а старые правила оставляет для браузеров, которые их не знают.
Мешает ли настройка полосы доступности?
Может, если полоса слишком тонкая или не контрастирует с дорожкой. Сохраняйте ширину, за которую можно ухватиться мышью, и цвет, отличающийся от фона.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.