OneTaskBy Tim King · Updated
Review Stars Generator
Accessible Partial Star Rating in CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Review Stars works
Review stars show an average rating at a glance, such as 4.3 out of 5 on a product page. Enter the rating and the number of reviews, pick a size and colour, and copy HTML and CSS that fill the stars to the exact score, with a label screen readers can speak.
A row of five whole stars cannot show the difference between 4.3 and 4.7. These review stars fill by percentage, so part of a star is coloured and the rest stays grey.
How the review stars fill
The five stars are text drawn by a ::before pseudo-element. Its background is a hard-edged
gradient, star colour up to the rating's percentage and grey after it, and background-clip: text
paints that gradient only inside the star shapes. The rating lives in one custom property,
--rating, so changing the score is a one-number edit.
Accessibility
Star glyphs mean nothing when read aloud, so the stars have role="img" and an aria-label such as
"4.3 out of 5 stars". The visible number is hidden from screen readers to avoid reading the score
twice. In Windows high contrast mode the gradient is dropped so the stars still show.
FAQ
How do I set the rating from my data?
Output the score into the inline style and label on the server, for example
style="--rating: 4.6" and aria-label="4.6 out of 5 stars". Keep both in step so sighted and
screen reader users get the same number.
Will these stars show in Google search results?
Not on their own. Review stars in search results come from structured data such as Product with AggregateRating, and Google only shows them for reviews of products or services, not reviews a business shows about itself.
Can I use SVG stars instead of text stars?
Yes. Replace the pseudo-element with an inline SVG of five stars and use the same percentage as the width of a coloured overlay. Text stars are lighter and simpler, but their shape varies a little between fonts.
Why not let visitors click the stars to rate?
This component shows a rating rather than collecting one. A rating input is best built from five radio buttons in a fieldset, which works with the keyboard and screen readers out of the box.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Trust Badge Strip
Build a row of trust badges with inline SVG icons.
Testimonial Carousel
Build an accessible swipeable testimonial slider on CSS scroll snap.
Stats Counter
Build a row of stats that count up when scrolled into view.
FAQ Builder
Build an accessible FAQ section with optional FAQPage schema.