testymo.
Open the app →

Free tools  ★  Star rating HTML generator

Star rating HTML generator

Type the rating, pick a size and two colours, and copy stars that fill to the exact tenth — as one block of HTML and CSS with no JavaScript, as a bare SVG, or as a PNG for an email or a deck. A badge card puts the number beside them.

What it costs
Nothing. No account, no email, no watermark, no limit on how often you use it.
Where your text goes
Nowhere. The whole tool runs in your browser — nothing you type is sent, stored, or seen by us. The page-view measurement this site carries counts the visit, never the text.

Layout

Star shape

Preview — exactly what the code renders

1137 bytes · no JavaScript 

<!-- Star rating — generated free at testymo.com/free/star-rating-html-generator -->
<style>
.tm-rating { display: inline-flex; align-items: center; gap: 0.5em; font: inherit; line-height: 1; }
.tm-rating svg { display: block; }
</style>
<span class="tm-rating">
  <svg xmlns="http://www.w3.org/2000/svg" width="136" height="24" viewBox="0 0 113.33 20" role="img" aria-label="Rated 4.7 out of 5"><defs><path id="tms-sharp-47-333-s" d="M10 1l2.47 5.53 6.03.56-4.55 4 1.34 5.91L10 13.9 4.71 17l1.34-5.91-4.55-4 6.03-.56L10 1z"/><clipPath id="tms-sharp-47-333-c"><rect x="0" y="0" width="106.73" height="20"/></clipPath></defs><g fill="#dddddd"><use href="#tms-sharp-47-333-s" x="0"/><use href="#tms-sharp-47-333-s" x="23.33"/><use href="#tms-sharp-47-333-s" x="46.67"/><use href="#tms-sharp-47-333-s" x="70"/><use href="#tms-sharp-47-333-s" x="93.33"/></g><g fill="#f5a524" clip-path="url(#tms-sharp-47-333-c)"><use href="#tms-sharp-47-333-s" x="0"/><use href="#tms-sharp-47-333-s" x="23.33"/><use href="#tms-sharp-47-333-s" x="46.67"/><use href="#tms-sharp-47-333-s" x="70"/><use href="#tms-sharp-47-333-s" x="93.33"/></g></svg>
</span>

The PNG is the stars alone on a transparent background, drawn at three times the size for sharp scaling.

01 What the code is, and why it fills to the tenth

The output is one inline <svg>: a star path defined once, drawn five times in the empty colour, then drawn again in the fill colour inside a <clipPath> that stops at exactly the rating. A 4.7 fills seventy percent of the fifth star’s width — not rounded to a half, not snapped to whole stars — and because it is vector, it stays crisp at 16 pixels in a footer and 64 in a hero. The fraction is measured against the star glyph rather than its bounding box, which is the detail most hand-rolled versions miss: fill 50% of the box and a half star lands at about 42% of the visible shape.

The SVG carries role="img" and an aria-label such as “Rated 4.7 out of 5”, so a screen reader announces the rating instead of five unlabeled shapes. Every class is prefixed tm-, the block contains no JavaScript, and it inherits your page’s font for the number and the badge line rather than shipping one.

02 Why not unicode stars or an image

Five ★ characters are the usual shortcut, and they cannot say 4.7: text glyphs fill whole or not at all, they change shape with every font, and a half-star hack on top of them needs a second element and an overflow: hidden that breaks the moment the font size changes. A PNG says 4.7 fine and then says it at one size, in one colour, with one background, and it costs a request. The SVG is the version that scales, recolours, and weighs a few hundred bytes — the size line above the code counts them.

The PNG button exists for the places an SVG cannot go: an email, a slide, a marketplace listing image. It draws the same stars at three times the size on a transparent background, so it composes over whatever sits behind it.

03 The badge, and the number it shows

The badge card puts the number in large type beside the stars and a line under them — “from 120 clients”, or whatever you type. It is deliberately platform-neutral: no logos, no “on Google” preset, because the rating in a badge is a number you typed and will retype. That is fine when it is true; the honest move is to keep the words next to it plain and to update it when the number moves.

If retyping is the part you would rather not own, that is exactly what a live rating widget is for: Testymo’s rating and badge layouts draw the average from the testimonials your customers submitted — each one with its permission stored alongside the words — and update the moment the next one lands, from a single script tag. The stars here show the number you type; the widget shows the number they gave.

04 Where it pastes

Anywhere that takes HTML: a custom-code block on Squarespace, Shopify or Wix, a Webflow embed element, a WordPress custom-HTML block, a Framer code component — the integrations pages show where each of those boxes lives. The “SVG only” output is for design tools and email builders that accept an SVG but not a <style> tag; paste it where an image would go.

If two ratings sit on one page, paste each one separately: every snippet carries its own clip, named after its own fill, so two different ratings never share one. Work out the rating itself from your per-star counts with the star rating calculator.

05 Questions this page gets

Will these stars show up in Google search results?
No — stars in a search result come from structured data, not from what is drawn on the page. The review schema generator builds that markup for the testimonials on your page, and says plainly which kinds of page Google shows stars for.
Can it pull my rating from Google or Trustpilot?
No. The page runs entirely in your browser and talks to nothing — you type the number. That is also why there are no platform logos: a badge that names a platform beside a hand-typed number claims something the page cannot check.
Does it do half stars?
It does any tenth. 3.5 is a half; 3.4 and 3.6 are what they say. Whole numbers fill whole stars.
Why is the rating capped at the star count?
A rating above its scale draws nothing sensible. Change “out of” first if you rate on a ten-point scale; the label and the fill follow it.
Do you store the numbers I type in?
No. Nothing here is sent anywhere — the page-view measurement on this site counts the visit, never the input. Close the tab and it is gone.

More free tools