About this set
Three ways to show a score that people can read but not change, each with fractional or half stars. Fractional stars with a CSS mask is a list of books rated 4.8, 4.3, 3.6 and 2.5, where one element draws all five stars: a gradient filled to the –r value sits under a repeating star mask, and where the browser supports round() and mod() the fraction is mapped onto the star’s body, so 4.3 fills about a third of the fifth star. Inline SVG stars rounded to the half is a row of hotel cards that use five SVG stars from one symbol, each a grey star with a gold copy on top that is shown whole, clipped to its left half or hidden. Outlined stars clipped to the score is a large 4.3 out of 5 with outline stars and a solid row clipped with clip-path: inset() to the value. Use the mask version when the score comes from data, the SVG version when you round on the server, and the outline version for a headline score. In every variant the score is text and the stars are hidden from screen readers.
What’s included
- Fractional stars from one masked element and a --r value
- Half stars from inline SVG with clip-path
- Outline stars with a solid row clipped to the score
- Score always written as text, such as Rated 4.3 out of 5
- No JavaScript and no icon font
Accessibility
Every score is real text that reads as Rated 4.3 out of 5, with the words Rated and out of 5 in visually hidden spans, so the visible number stays short. The star graphics are aria-hidden, so screen readers do not announce five images. Nothing in the set is interactive or animated.
Customise it
Change --sd-on, --sd-off and --sd-edge on .sd for the star colours and set --s on each element for the size. In Bootstrap the same variables apply; in Tailwind edit the sd colours in @theme and pass --r and --s in the style attribute.
