Звёзды рейтинга на CSS (оценка с долями)

Звёзды рейтинга на CSS (оценка с долями): для чего нужен

Звёзды, которые бывают только полными или пустыми, не показывают разницы между 4,1 и 4,9. Этот генератор создаёт звёзды на чистом CSS, которые заполняют точную долю оценки: градиент, обрезанный по тексту, и оценка в CSS-переменной.

Настройте количество звёзд, размер, цвета, число рядом и общее число отзывов. Есть и кликабельная версия на скрытых переключателях, которая работает с мышью, касанием и клавиатурой и отправляет оценку в форме без JavaScript. У обеих версий есть текст для программ чтения с экрана.

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

1. Введите оценку и количество звёзд.
2. Настройте размер и цвета.
3. Скопируйте код.

Когда использовать

• Средняя оценка товаров.
• Форма отзыва.
• Сводка отзывов на лендингах.

Частые вопросы

Как звезда показывает долю?

Звёзды — это текст (★), закрашенный градиентом с резкой границей: полный цвет до процента оценки и пустой цвет после. При оценке 4,3 из 5 градиент закрашивает 86% ширины, и пятая звезда оказывается закрашена лишь частично.

Это доступно?

Да. У элемента есть role=img и aria-label вроде «Оценка 4,3 из 5», именно это озвучивают программы чтения с экрана вместо символов.

Как работает кликабельная версия?

Она использует скрытые переключатели (radio), по одному на каждую звезду, поэтому работает с мышью, касанием и клавиатурой (стрелки) и отправляет оценку вместе с формой, без JavaScript.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

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