CSS-генератор полосы прокрутки

Визуальный генератор пользовательских полос прокрутки CSS. Настройте ширину, цвет дорожки, цвет ползунка, границы и скругление углов с предварительным просмотром в реальном времени. Совместимо с Chrome, Safari, Edge и Firefox.

Настройка

Ширина (Вертикальный) {{ scrollbarWidth }}px

Высота (Горизонтальный) {{ scrollbarHeight }}px

Минимальная высота ползунка {{ thumbMinHeight }}px

Ширина Firefox

Цвет

Цвет при наведении

Цвет ползунка при клике

Радиус скругления {{ thumbRadius }}px

Ширина рамки

Стиль рамки

Цвет рамки

Цвет

Цвет дорожки при наведении

Цвет дорожки при клике

Радиус скругления {{ trackRadius }}px

Ширина рамки

Стиль рамки

Цвет рамки

Размытие тени (Blur) {{ shadowBlur }}px

Цвет тени

Прозрачность тени {{ shadowOpacity }}%

Внутренняя тень (Inset)

Совместимость с устаревшим WebKit

Включить комментарии CSS

Предпросмотр в реальном времени

Прокручиваемая область предпросмотра

Это прокручиваемая область. Перетащите ползунки справа или снизу для тестирования.

Настройте параметры слева, и предпросмотр обновится мгновенно.

Совместимо с Chrome/Safari/Edge (с рамками, тенями и наведением) и Firefox.

Когда будете довольны, скопируйте полученный CSS-код.