Bewertungssterne in CSS (Note mit Bruchteilen)
Gib die Note ein und passe das Aussehen an. Die Note steht in einer CSS-Variable: Ändere die Zahl, und die Sterne folgen.
So geht’sNote 4,7 mit fast vollem Stern
Verfügbar auf: 
Bewertungssterne in CSS (Note mit Bruchteilen): wofür es gut ist
Sterne, die nur voll oder leer sind, zeigen nicht den Unterschied zwischen 4,1 und 4,9. Dieser Generator erstellt Sterne in reinem CSS, die den genauen Bruchteil der Note füllen, mit einem im Text ausgeschnittenen Verlauf und der Note in einer CSS-Variable.
Passe Anzahl der Sterne, Größe, Farben, die Zahl daneben und die Gesamtzahl der Bewertungen an. Es gibt auch die anklickbare Version aus versteckten Optionsfeldern, die mit Maus, Touch und Tastatur funktioniert und die Note in einem Formular ohne JavaScript sendet. Beide Versionen haben Text für Screenreader.
So geht’s
- Gib die Note und die Anzahl der Sterne ein.
- Passe Größe und Farben an.
- Kopiere den Code.
Wann nutzen
- Durchschnittsnote von Produkten.
- Bewertungsformular.
- Zusammenfassung von Bewertungen auf Landingpages.
Häufige Fragen
Wie zeigt der Stern einen Bruchteil?
Die Sterne sind Text (★), gefärbt mit einem Verlauf, der einen harten Stopp hat: die volle Farbe bis zum Prozentsatz der Note und danach die leere Farbe. Bei Note 4,3 von 5 färbt der Verlauf 86 % der Breite, und der fünfte Stern ist nur zu einem Teil gefärbt.
Ist es barrierefrei?
Ja. Das Element hat role=img und ein aria-label wie „Note 4,3 von 5“, das Screenreader anstelle der Symbole ansagen.
Wie funktioniert die anklickbare Version?
Sie nutzt versteckte Optionsfelder (Radio), eines für jeden Stern, sodass sie mit Maus, Touch und Tastatur (Pfeile) funktioniert und die Note mit dem Formular sendet, ohne JavaScript.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.