CSS Rating Generator

Create a custom CSS star rating widget with a live preview. Set the stars, rating value, size and colours, then copy the ready-to-use HTML and CSS.

How to Use

1. Set the number of stars and the rating value (fractions like 3.5 work).
2. Adjust the star size and the filled and empty colours.
3. Preview the rating live.
4. Press Copy and paste the generated HTML and CSS into your site.

Key Features

• Fractional ratings — half stars and any fraction render correctly.
• Live preview — see every change instantly as you adjust the controls.
• Self-contained code — HTML plus CSS, ready to paste into any page.
• 100% private — runs entirely in your browser; nothing is sent or stored.

FAQs

How do fractional ratings work?

The widget layers two rows of stars. The top (filled) row is clipped to the rating percentage, so 3.5 out of 5 shows three and a half stars.

Can I use a different symbol?

The output uses the star character, but you can replace it with any character or icon font in the HTML to make hearts, circles or anything else.

Is the rating accessible?

Yes. The widget carries a role of img and an aria-label that describes the rating for screen readers.

Is my data sent anywhere?

No. Everything runs entirely in your browser and never transmits or saves your entries.

Related Tools

Try these related tools: CSS Progress Bar Generator, CSS Button Generator and CSS Card Generator.