7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight rating designs for collecting and showing reviews: an accessible star input, a fractional star display, a breakdown chart, heart and emoji scales, a review card, a compact product-card rating and stars that fill with a sweep on hover.
A five-star rating people can set, built from radio buttons so it is keyboard accessible with the arrow keys. The inputs are in reverse order with flex-direction: row-reverse, which lets the sibling selector light up every star up to the hovered one.
A read-only rating that shows fractions such as 4.3 stars. Two layers of the same five stars are stacked, and the coloured top layer is clipped to the exact percentage width, while the text 4.3 out of 5 is what screen readers hear.
View code
<div class="rd">
<span class="stars" style="--v:4.3" role="img" aria-label="Rated 4.3 out of 5"></span>
<span class="txt">4.3 <small>(1,248 reviews)</small></span>
</div>
The review summary found on product pages: the average score, a star row and a bar for each star level showing how many reviews gave it. Every row is a link that could filter the reviews, and the counts are written as text beside each bar.
A rating with hearts instead of stars for wish lists or recipe sites. It uses the same radio-group technique as the star input, with a little scale pop on the chosen heart; the animation is skipped for people who prefer reduced motion.
View code
<fieldset class="hearts">
<legend>How much did you love it?</legend>
<div class="hr">
<input type="radio" name="h" id="h3"><label for="h3"><span class="sr">3 hearts</span>❤</label>
<input type="radio" name="h" id="h2" checked><label for="h2"><span class="sr">2 hearts</span>❤</label>
<input type="radio" name="h" id="h1"><label for="h1"><span class="sr">1 heart</span>❤</label>
</div>
</fieldset>
A five-face satisfaction scale from angry to delighted, common in support widgets. Unselected faces are greyscale and the chosen one is shown in full colour and larger; each option has a text label so the meaning is not carried by the emoji alone.
A single customer review with a star rating, a verified purchase badge, the review text and a was-this-helpful button. The stars are one image with an accessible name, and the helpful count updates and disables the button after one click.
View code
<article class="rv">
<header><b>Priya S.</b><span class="vf">Verified purchase</span></header>
<p class="st" role="img" aria-label="5 out of 5 stars">★★★★★</p>
<h3>Beautiful glaze, sturdy handle</h3>
<p>Bought two as a gift and ended up keeping one. Holds heat well and the colour is even nicer in person.</p>
<button type="button" class="hp">Helpful (<span>12</span>)</button>
</article>
The small rating shown on product cards: one star, the average and the review count in a single line. It takes very little space, keeps the number readable instead of drawing five stars, and the whole line is one accessible phrase.
View code
<div class="pc">
<div class="im" aria-hidden="true"></div>
<h3>Stoneware dinner plate</h3>
<p class="cr" aria-label="Rated 4.8 out of 5 from 96 reviews"><span aria-hidden="true">★ 4.8 <small>(96)</small></span></p>
<p class="pr">$24.00</p>
</div>
Stars that fill with a sweeping gradient as you hover across them, rather than snapping colour. Each star is an SVG with a gradient fill whose stop animates, the chosen rating stays filled, and keyboard users get the same result with the arrow keys.
A rating someone sets is a choice of one value, so build it from radio buttons in a fieldset. Each star's label says 4 stars and so on in hidden text, and the arrow keys move between values like any radio group.
Lighting stars up to the hover
Placing the inputs in reverse order and using flex-direction: row-reverse lets the general sibling selector ~ colour every star up to the hovered or checked one, with no JavaScript.
Displaying fractions
For a read-only 4.3 rating, stack two rows of stars and clip the coloured row to 86% width. Give the element role="img" and a label like Rated 4.3 out of 5, since the drawing itself is not readable.
Honest reviews
Only show ratings from real customers. Adding fake ratings or review counts is misleading, and search engines can penalise review markup that does not match genuine reviews on the page.
Frequently asked questions
Do the star inputs work with a keyboard?
Yes. They are radio buttons, so Tab reaches the group and arrow keys change the value.
Can I use half stars as input?
You can add ten radios with half-width labels, but whole stars are easier to use and to understand.
Which demo uses JavaScript?
Only the review card, to update the helpful count.