Skip to main content
Penguin ToolsПингвин Инструменты

Генератор CSS-скроллбара

Настройка дизайна CSS-скроллбара в визуальном редакторе. Изменение цвета, ширины, скругления углов и копирование кода.

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

Прокручиваемый контент #1 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #2 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #3 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #4 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #5 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #6 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #7 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #8 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #9 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #10 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #11 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #12 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #13 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #14 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #15 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #16 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #17 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #18 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #19 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #20 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #21 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #22 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #23 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #24 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #25 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #26 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #27 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #28 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #29 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Прокручиваемый контент #30 - Предпросмотр вашего пользовательского скроллбара. Прокрутите, чтобы увидеть его в действии.

Поделиться
📖

Как использовать

Step 1

Задайте стиль

Задайте стиль

Задайте ширину скроллбара, цвета, скругление углов и т.д.

Step 2

Предпросмотр

Предпросмотр

Проверьте внешний вид скроллбара в предпросмотре в реальном времени

Step 3

Скопируйте CSS

Скопируйте CSS

Скопируйте сгенерированный CSS-код

✨

Возможности

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

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

Кроссбраузерная поддержка

Автоматическая генерация CSS для WebKit и Firefox

Состояния наведения и нажатия

Индивидуальная настройка стилей при наведении и перетаскивании

❓

FAQ

Да, с помощью ::-webkit-scrollbar (Chrome/Safari/Edge) и scrollbar-width/scrollbar-color (Firefox).

🔗Похожие инструменты

🎨
Инструменты для дизайна

Конвертер цветовых кодов

Конвертация между цветовыми кодами HEX, RGB и HSL. Используйте палитру цветов и предпросмотр в реальном времени для интуитивного выбора цвета.

🎨
Инструменты для дизайна

Палитра цветов

Выбирайте цвета с помощью цветового колеса и ползунков. Получайте и копируйте цветовые коды в форматах HEX, RGB и HSL.

🎨
Инструменты для дизайна

Извлечение цветов из изображения

Автоматическое определение доминирующих цветов изображения и генерация цветовой палитры. Также можно нажать на любую точку изображения для выбора цвета.

🎯
Инструменты для дизайна

Определение среднего цвета изображения

Вычисление среднего цвета всего изображения или выделенной области. Полезно для подбора цветовых схем или фоновых цветов миниатюр.

🌈
Инструменты для дизайна

Генератор CSS-градиентов

Визуально создавайте CSS-градиенты с помощью перетаскивания. Поддержка линейных, радиальных и конических градиентов с предустановками.

🔲
Инструменты для дизайна

Генератор CSS Box Shadow

Визуально создавайте CSS box-shadow с помощью ползунков. Поддержка нескольких теней и внутренних теней.