EspañolCSS star rating (fractional ratings)
Type the rating and adjust the look. The rating lives in a CSS variable: change the number and the stars follow.
How to useA 4.7 rating with the star almost full
Available in: 
CSS star rating (fractional ratings): what it is for
Stars that are only full or empty do not show the difference between 4.1 and 4.9. This generator creates pure CSS stars that fill the exact fraction of the rating, with a gradient clipped to the text and the rating in a CSS variable.
Adjust the number of stars, the size, the colors, the number beside them and the total of reviews. There is also a clickable version, made with hidden radio buttons, that works with mouse, touch and keyboard and sends the rating in a form without JavaScript. Both versions have text for screen readers.
How to use
- Type the rating and the number of stars.
- Adjust size and colors.
- Copy the code.
When to use it
- Average product ratings.
- Review forms.
- Review summaries on landing pages.
Frequently asked questions
How does a star show a fraction?
The stars are text (★) painted with a gradient that has a hard stop: the full color up to the rating percentage and the empty color after it. With a 4.3 out of 5 rating, the gradient paints 86% of the width, and the fifth star gets only a colored piece.
Is it accessible?
Yes. The element has role=img and an aria-label such as 'Rating 4.3 out of 5', which is what screen readers announce instead of the symbols.
How does the clickable version work?
It uses hidden radio buttons, one for each star, so it works with mouse, touch and keyboard (arrow keys) and sends the rating with the form, without JavaScript.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.