Free tool
CSS Star Rating Generator
Generate accessible, half-star CSS star ratings, pick a value, size and colors, then copy a self-contained, JS-free snippet with aria-label and CSS custom properties.
Live preview
4.5 out of 5 · 90% filled
Generated HTML & CSS
<!-- Reviewz CSS star rating -->
<span
class="star-rating"
role="img"
aria-label="Rated 4.5 out of 5 stars"
style="--rating: 90.0%; --star-size: 28px; --star-filled: #00B67A; --star-empty: #e2e2e2;"
>
<span class="star-rating__empty" aria-hidden="true">★★★★★</span>
<span class="star-rating__filled" aria-hidden="true">★★★★★</span>
</span>
<style>
.star-rating {
position: relative;
display: inline-block;
font-size: var(--star-size, 28px);
line-height: 1;
white-space: nowrap;
}
.star-rating__empty {
color: var(--star-empty, #e2e2e2);
}
.star-rating__filled {
position: absolute;
top: 0;
left: 0;
width: var(--rating, 0%);
overflow: hidden;
color: var(--star-filled, #00b67a);
}
</style>Paste this anywhere, it needs no JavaScript and no external stylesheet.
How to build an accessible CSS star rating
A CSS star rating is a pure-CSS way to show a score out of five, no rating libraries, no images, no JavaScript. The robust technique is the half-star overlay: render two identical rows of five star characters (★★★★★) on top of each other. The bottom row is painted in your empty color; the top row, in your filled color, sits inside an overflow: hidden wrapper whose width is set by the formula rating ÷ 5 × 100%. Because the clip width can be any percentage, fractional and half-star values render cleanly at any size on any display.
Step by step
1. Set your score with the Rating value slider and choose a star size and the filled/empty colors. 2. Copy the generated, self-contained snippet. 3. Paste it into your page, theme section, or component. The output uses CSS custom properties, --rating, --star-size, --star-filled and --star-empty, so you can restyle every instance from one inline style or a shared class without editing markup.
Accessibility: aria-label and role="img"
Decorative stars are noise to a screen reader, so the component is marked up as a single image. The wrapper carries role="img" and a human-readable aria-label="Rated 4.5 out of 5 stars", while both star rows are hidden with aria-hidden="true". The result: assistive technology announces one clear sentence instead of ten star glyphs, and the score never depends on color alone, important when you care about both accessibility and how reviews affect SEO.
Embedding on Shopify (Liquid)
On a Shopify storefront, drop the snippet into any Liquid section, custom Liquid block, or a metafield that renders raw HTML. Because the CSS is scoped to the .star-rating class and there is no JavaScript, it renders identically across themes and never blocks the page. To make it dynamic, feed a Liquid value into the width property, for a 0–5 rating, style="--rating: {{ product.metafields.reviews.rating | times: 20 }}%;" converts the score to the correct clip percentage automatically.
Common mistakes
The frequent pitfalls: forgetting white-space: nowrap so the filled row wraps and misaligns; leaving the empty layer without position: relative on the wrapper, which detaches the absolutely-positioned filled layer; omitting the aria-label (or leaving the stars readable to screen readers); and using a too-low contrast empty color that disappears on dark backgrounds. The generator avoids all four by default.
Worked example: a 4.5 rating
Say a product averages 4.5 stars. Apply the formula: 4.5 ÷ 5 × 100% = 90%. The generator sets --rating: 90.0%, so four-and-a-half stars are filled and the aria-label reads "Rated 4.5 out of 5 stars." Change the value to 3.7 and the width becomes 74%; nothing else in the markup changes. That single-source-of-truth design is what makes these stars easy to maintain at scale.
Built and maintained by the Reviewz team, we help 250+ Shopify stores collect reviews.
CSS star rating FAQ
- How do I make a CSS star rating?
- Stack two identical rows of five star characters. Color the bottom row as your empty state and the top row as your filled state, then clip the filled row with overflow: hidden and set its width to rating ÷ 5 × 100%. Because the width is a percentage, you get pixel-accurate half stars and any fractional value with no images, web fonts or JavaScript. The generator above writes this exact markup for you.
- Is this CSS star rating accessible for screen readers?
- Yes. The wrapper is marked up as a single image with role="img" and an aria-label like "Rated 4.5 out of 5 stars", so assistive technology announces one clear sentence instead of reading ten star glyphs. Both decorative star rows carry aria-hidden="true". The filled and empty colors in the generator default to a contrast that stays legible, and because nothing relies on color alone the rating is still conveyed through the label.
- How do half stars work without images?
- The filled star layer is clipped to a percentage width. A 4.5 rating sets that width to 90%, which visually cuts the fifth star exactly in half. Any fractional value works the same way, 3.7 becomes 74%, 2.25 becomes 45%. This is more precise than the older :nth-child trick and avoids sprite images entirely, so it stays crisp on retina screens at any star size.
- Can I change the colors and size later with CSS custom properties?
- Absolutely. The snippet is driven entirely by custom properties: --rating, --star-size, --star-filled and --star-empty. Override them inline on the element or in your own stylesheet (for example .star-rating { --star-filled: #ffb400; }) and every instance updates without touching the HTML. That makes it trivial to theme stars per collection or match your brand palette.
- Does this CSS star rating work on a Shopify storefront?
- Yes. Paste the snippet into any Liquid section, a custom Liquid block, or a metafield that renders raw HTML. Because it ships its own scoped CSS and uses no JavaScript, it renders identically across themes and never blocks rendering. To bind a real rating, replace the static value with a Liquid variable, e.g. style="--rating: {{ product.metafields.reviews.rating | times: 20 }}%;".
Keep building
Explore every free utility on the Reviewz tools page. Once your stars render, generate matching rich-snippet markup with our Review Schema Generator, and read how customer reviews affect SEO and how many reviews a product needs to convert.
Collect reviews on autopilot with Reviewz
Static stars are a great start, let Reviewz automatically gather real customer ratings and show genuine star reviews on your Shopify store.
Get Reviewz on the Shopify App Store