--- title: "Star rating HTML generator — exact stars as HTML, SVG or PNG — Testymo" description: "Type a rating like 4.7 and get exact fractional stars as a zero-JavaScript HTML block, a bare SVG or a transparent PNG, with an optional badge card. Free, in your browser." url: https://testymo.com/free/star-rating-html-generator --- [Free tools](https://testymo.com/free) ★ 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. Rating Out of Layout Star shape Star size 24px Gap 4px Filled stars Empty stars Preview — exactly what the code renders 1137 bytes · no JavaScript ``` ``` 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 ``: a star path defined once, drawn five times in the empty colour, then drawn again in the fill colour inside a `` 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](https://testymo.com/examples) 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](https://testymo.com/integrations) 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 `