Estrellas de valoración en CSS (nota con fracciones)
Escribe la nota y ajusta el aspecto. La nota queda en una variable CSS: cambia el número y las estrellas lo siguen.
Cómo usarNota 4,7 con la estrella casi llena
Disponible en: 
Estrellas de valoración en CSS (nota con fracciones): para qué sirve
Las estrellas que solo quedan llenas o vacías no muestran la diferencia entre 4,1 y 4,9. Este generador crea estrellas en CSS puro que rellenan la fracción exacta de la nota, con un degradado recortado en el texto y la nota en una variable CSS.
Ajusta la cantidad de estrellas, el tamaño, los colores, el número al lado y el total de valoraciones. También hay una versión clicable, hecha con botones de opción ocultos, que funciona con mouse, toque y teclado y envía la nota en un formulario sin JavaScript. Las dos versiones tienen texto para lectores de pantalla.
Cómo usar
- Escribe la nota y la cantidad de estrellas.
- Ajusta el tamaño y los colores.
- Copia el código.
Cuándo usar
- Nota promedio de productos.
- Formulario de valoración.
- Resumen de valoraciones en landing pages.
Preguntas frecuentes
¿Cómo muestra la estrella una fracción?
Las estrellas son texto (★) pintado con un degradado que tiene una parada dura: el color lleno hasta el porcentaje de la nota y el color vacío después. Con nota 4,3 de 5, el degradado pinta el 86% del ancho, y la quinta estrella queda con solo un pedazo coloreado.
¿Es accesible?
Sí. El elemento tiene role=img y un aria-label como 'Nota 4,3 de 5', que es lo que los lectores de pantalla anuncian en lugar de los símbolos.
¿Cómo funciona la versión clicable?
Usa botones de opción (radio) ocultos, uno por cada estrella, así que funciona con mouse, toque y teclado (flechas) y envía la nota junto con el formulario, sin JavaScript.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.