Stelle di valutazione in CSS (voto con frazioni)
Scrivi il voto e regola l’aspetto. Il voto sta in una variabile CSS: cambia il numero e le stelle lo seguono.
Come si usaVoto 4,7 con la stella quasi piena
Disponibile in: 
Stelle di valutazione in CSS (voto con frazioni): a cosa serve
Stelle che sono solo piene o vuote non mostrano la differenza tra 4,1 e 4,9. Questo generatore crea stelle in puro CSS che riempiono la frazione esatta del voto, con un gradiente ritagliato sul testo e il voto in una variabile CSS.
Regola il numero di stelle, la dimensione, i colori, il numero accanto e il totale delle recensioni. C’è anche la versione cliccabile, fatta con pulsanti di opzione nascosti, che funziona con mouse, tocco e tastiera e invia il voto in un modulo senza JavaScript. Entrambe le versioni hanno testo per gli screen reader.
Come si usa
- Scrivi il voto e il numero di stelle.
- Regola dimensione e colori.
- Copia il codice.
Quando usarlo
- Voto medio dei prodotti.
- Modulo di valutazione.
- Riepilogo delle recensioni nelle landing page.
Domande frequenti
Come fa la stella a mostrare una frazione?
Le stelle sono testo (★) colorato con un gradiente che ha un arresto netto: il colore pieno fino alla percentuale del voto e il colore vuoto dopo. Con un voto di 4,3 su 5, il gradiente colora l’86% della larghezza, e la quinta stella ha solo una parte colorata.
È accessibile?
Sì. L’elemento ha role=img e un aria-label come «Voto 4,3 su 5», che è ciò che gli screen reader annunciano al posto dei simboli.
Come funziona la versione cliccabile?
Usa pulsanti di opzione (radio) nascosti, uno per ogni stella, quindi funziona con mouse, tocco e tastiera (frecce) e invia il voto insieme al modulo, senza JavaScript.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.