Генератор CSS-переключателя

Настройте параметры, чтобы спроектировать переключатель (toggle switch), нажмите на предпросмотр, чтобы увидеть анимацию, и скопируйте готовые к использованию HTML и CSS. Задайте ширину, высоту, цвета дорожки для выключенного/включённого состояния, цвет бегунка, скругление углов и скорость перехода — на выходе стандартный доступный переключатель на основе checkbox, а не просто декоративная фигура.

Что это за инструмент?

CSS-переключатель — это checkbox, стилизованный так, чтобы выглядеть и вести себя как физический тумблер вкл/выкл — дорожка в форме капсулы с круглым бегунком, скользящим от одного края к другому. Под капотом это по-прежнему настоящий checkbox-input, и это важно: элемент остаётся доступным с клавиатуры, работает со скринридерами и корректно отправляется в формах — в отличие от переключателя, собранного только из кликабельных div.

Этот инструмент строит этот шаблон за вас: скрытый checkbox, дорожку, меняющую цвет в зависимости от :checked, и бегунок, скользящий с помощью CSS-трансформации. Настройте ползунки и цветовые палитры, нажмите на предпросмотр, чтобы протестировать реальную анимацию переключения, и скопируйте как CSS, так и минимальную HTML-разметку, от которой он зависит.

Источник: WAI-ARIA Authoring Practices, W3C — рекомендует настоящий checkbox-input как доступную основу для элемента управления switch, поэтому результат этого генератора сохраняет базовый input-элемент.

Зачем его использовать?

Предпросмотр — настоящий кликабельный переключатель, а не статичное изображение, поэтому можно проверить точную анимацию перед использованием.
Генерирует и CSS, и доступную HTML-структуру (checkbox-input + label), от которой зависит CSS.
Полный контроль над шириной/высотой дорожки, цветом выключенного состояния, цветом включённого состояния, цветом бегунка, скруглением углов и скоростью перехода.
Использует стандартный шаблон checkbox + селектор :checked, поэтому переключатель остаётся доступным с клавиатуры и работает внутри реальных форм.
Работает полностью в вашем браузере — ничего из настроенного никуда не загружается.
Бесплатно, без регистрации, работает на мобильных.

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

Задайте ширину и высоту, чтобы определить размер дорожки — бегунок автоматически подгоняется по размеру с небольшим внутренним отступом.
Выберите цвет дорожки для выключенного (неотмеченного) состояния и цвет для включённого состояния при активации.
Выберите цвет бегунка — белый или светлый нейтральный обычно даёт наибольший контраст с дорожкой.
Установите радиус скругления на 50% для классического переключателя-капсулы или уменьшите его для слегка скруглённого прямоугольника.
Настройте скорость перехода, чтобы контролировать, насколько быстро скользит бегунок и меняется цвет дорожки между состояниями.
Нажмите на переключатель в предпросмотре, чтобы убедиться, что анимация выглядит правильно, затем скопируйте CSS и HTML в свой проект.

Пример

Ввод

Ширина: 52px · Высота: 28px · Цвет выкл: #cbd5e1 · Цвет вкл: #ea580c · Радиус: 50% · Скорость: 200ms

Результат

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Суть шаблона: состояние :checked чекбокса в сочетании с селектором общего соседа (~) управляет одновременно цветом фона дорожки и расстоянием скольжения бегунка.

Почему checkbox, а не div с обработчиком клика

Заманчиво собрать переключатель из двух элементов <div> и небольшого JavaScript, переключающего класс по клику, но такой подход обычно ломает навигацию с клавиатуры, озвучивание скринридерами и отправку форм — настоящий checkbox решает все три задачи бесплатно. Шаблон, который генерирует этот инструмент, сохраняет <input type="checkbox"> как настоящий интерактивный элемент (визуально скрытый, но по-прежнему доступный для фокуса) и использует чистый CSS — вообще без JavaScript — для стилизации дорожки и бегунка на основе нативного состояния :checked чекбокса.

Распространённые стили переключателей

Классический переключатель-капсула: радиус скругления 50%, умеренный размер (48–56px в ширину), заметная смена цвета между вкл/выкл.
Переключатель в панели настроек: меньший размер (36–44px в ширину), приглушённый цвет выключенного состояния (светло-серый) на фоне фирменного цвета включённого.
Слегка скруглённый переключатель: радиус скругления около 20–30% вместо полной капсулы, для более прямоугольного вида в стиле приложения.
Быстрый, чёткий переключатель: скорость перехода 100–150ms ощущается мгновенной и отзывчивой.
Медленный, размеренный переключатель: скорость перехода 300–400ms воспринимается более плавной и отточенной, полезна для одного заметного переключателя настроек.

Сочетание с другими CSS-инструментами

Дорожка и бегунок уже используют border-radius внутри, так что если нужен квадратный вариант или иное скругление, выходящее за рамки ползунка, Генератор border-radius позволяет точно настроить каждый угол отдельно перед вставкой значения. Генератор box-shadow полезен для добавления лёгкой тени бегунку ради дополнительной глубины.

→ Генератор border-radius · Генератор box-shadow

Часто задаваемые вопросы

Почему в результате есть HTML, а не только CSS?

Переключатель — не чисто визуальный элемент: он зависит от настоящего <input type="checkbox">, обёрнутого в <label>, а также элементов дорожки и бегунка, на которые нацелен CSS. Без этой точной структуры селекторы на основе :checked в сгенерированном CSS не имели бы, к чему применяться, поэтому обе части копируются вместе.

Доступен ли этот переключатель для людей с ограниченными возможностями?

Да — поскольку интерактивным элементом является настоящий checkbox (визуально скрытый техникой, которая оставляет его в дереве доступности, а не через display:none), он остаётся доступным для фокуса по Tab, переключаемым по Space или Enter, и корректно озвучивается скринридерами как checkbox в текущем отмеченном/неотмеченном состоянии.

Можно ли использовать это внутри настоящей HTML-формы?

Да. Поскольку базовый элемент — стандартный checkbox-input, вы можете дать ему атрибуты name и value, и он будет отправляться как любой другой checkbox — включённые переключатели отправляют своё значение, выключенные пропускаются, точно как у обычного checkbox.

Почему бегунок движется с помощью transform, а не изменением позиции left?

Анимация transform: translateX() обрабатывается композитором браузера и остаётся плавной даже на слабых устройствах, тогда как анимация left вызывает пересчёт разметки на каждом кадре. Поэтому сгенерированный CSS всегда использует transform для скользящего движения.

Что именно контролирует ползунок радиуса скругления?

Он масштабирует одновременно скругление углов дорожки и бегунка, пропорционально высоте дорожки. При 50% получается полностью скруглённая капсула с круглым бегунком; меньшие значения сохраняют форму более прямоугольной для более квадратного переключателя в стиле приложения.