Тестер курсоров CSS

• Мгновенный предпросмотр курсоров CSS: просматривайте все 38 стандартных стилей курсора CSS, наводя на каждую карточку тестера. Курсор меняется сразу при наведении — без кликов, ожидания и догадок о том, как выглядит каждый курсор на вашей платформе.
• Безопасный тестер курсоров CSS онлайн: тестер работает полностью в браузере без сбора данных, отслеживания и запросов к серверу. Это чисто клиентский справочный инструмент — ваше посещение полностью приватно.
• Тестер курсоров CSS без установки: используйте тестер прямо в любом современном браузере без скачиваний, плагинов и расширений. Курсоры отрисовываются нативным набором вашей ОС, так что вы видите ровно то, что увидят пользователи.
• 100 % бесплатно с копированием в один клик: тестер курсоров CSS полностью бесплатен, без регистрации, ограничений и рекламы. Нажмите на любую карточку курсора, чтобы мгновенно скопировать готовое CSS-объявление в буфер обмена.

• Выбор правильного курсора для элементов интерфейса: используйте тестер, чтобы найти подходящий курсор для кнопок, ссылок, перетаскиваемых элементов и отключённых контролов. Наводите на каждый курсор в тестере, чтобы точно увидеть его вид перед добавлением в таблицу стилей.
• Проектирование интерфейсов drag-and-drop: интерфейсам перетаскивания нужна точная реакция курсора — grab при наведении, grabbing при перетаскивании, no-drop над недопустимыми целями. Тестер позволяет сравнить все курсоры перетаскивания рядом.
• Компоненты изменяемых панелей и разделителей: изменяемым панелям нужны направленные курсоры изменения размера (ew-resize, ns-resize, col-resize, row-resize). Используйте тестер, чтобы просмотреть все варианты и выбрать нужный для каждой ручки.
• Доступность и UX-обратная связь: корректная реакция курсора — требование доступности, пользователи полагаются на смену курсора, чтобы понять, что интерактивно. Тестер помогает убедиться, что отключённые элементы используют not-allowed, а состояния загрузки — wait или progress.
• Проверка курсоров на разных платформах: курсоры CSS по-разному отрисовываются в Windows, macOS и Linux. Проверяйте тестер на каждой платформе, чтобы убедиться, что выбранный курсор корректен для вашей аудитории до релиза.
• Ревью кода и документация: при проверке CSS-кода или написании документации компонентов используйте тестер как быстрый справочник, чтобы убедиться, что значения курсора верны и уместны для описанного взаимодействия.

Свойство CSS cursor задаёт форму курсора мыши, появляющуюся при наведении на элемент. Это один из важнейших UX-сигналов в веб-интерфейсах — курсор сообщает пользователям, что произойдёт при взаимодействии с элементом. Спецификация CSS определяет 38 стандартных значений курсора, разделённых на категории: общие курсоры, индикаторы ссылок и статуса, курсоры выделения, курсоры перетаскивания, курсоры изменения размера и курсоры масштабирования. Наш тестер курсоров CSS позволяет просмотреть их все с нативной отрисовкой курсоров вашей ОС, так что вы видите ровно то, что увидят ваши пользователи на своей платформе.

1. Просматривайте или ищите: используйте вкладки категорий для фильтрации курсоров по типу (Общие, Ссылки и статус, Выделение, Перетаскивание, Изменение размера, Масштаб) либо введите название или описание курсора в поле поиска. Тестер мгновенно обновляет сетку.
2. Наведите для предпросмотра: переместите мышь на любую карточку курсора, чтобы увидеть смену курсора в реальном времени. Информационная строка внизу показывает название курсора, CSS-объявление и описание. Тестер использует нативную отрисовку курсоров браузера — изображения и SVG не применяются.
3. Нажмите, чтобы скопировать: нажмите на любую карточку курсора, чтобы скопировать полное CSS-объявление (например, cursor: pointer; ) в буфер обмена. Вставьте его прямо в таблицу стилей. Карточка показывает подтверждение «Скопировано!» на 1,5 секунды.

• Общие: auto (браузер решает), default (стрелка платформы) и none (скрытый курсор). Используйте auto для большинства элементов и переопределяйте только там, где нужно.
• Ссылки и статус: pointer для кликабельных элементов, wait для блокирующих операций, progress для фоновых операций, help для подсказок и context-menu для целей правого клика.
• Перетаскивание: grab и grabbing для перетаскиваемых элементов, move для перемещаемых объектов, copy для копирования, alias для ярлыков, no-drop и not-allowed для недопустимых целей и отключённых действий.
• Изменение размера: направленные курсоры для всех 8 сторон света (n, s, e, w, ne, nw, se, sw), а также двунаправленные варианты (ew-resize, ns-resize, nesw-resize, nwse-resize) и col-resize , row-resize и all-scroll для изменения размера таблиц и панелей.

Все 38 значений курсора CSS в тестере поддерживаются в Chrome, Firefox, Safari, Edge и Opera. Внешний вид каждого курсора зависит от операционной системы: Windows использует курсоры Aero, macOS — свой набор, Linux — тему курсоров X11. Это сделано намеренно: браузер передаёт отрисовку курсора ОС, чтобы курсоры ощущались нативными на платформе пользователя. Курсор none полностью скрывает указатель — используйте его осторожно и только когда вы предоставляете свой курсор через JavaScript, поскольку скрытие курсора без замены нарушает доступность.