15+ Pure HTML & CSS Star Ratings

Start ratings come in handy for websites with products and service websites, with five stars being the highest quality. That helps the user or customers to get a rough idea of product or service quality.

Anyway, for developers, we have collected 15+ star rating snippets. Including SVG, Unicode, and FontAwesome icons with emotion and smooth animations.

How Are You? Ratings

How Are You?Get snippet

CSS rating system that changes the facial expression based on how many stars are chosen.

Rate star buttons (pure CSS)

Rate star buttons (pure css)Get Snippet

Simple rating snippet with using an SVG image for the stars and clean animations.

Pure CSS Rating Card

Pure CSS Rating CardGet snippet

Rating card with facebook emojis. Used .png files for emoji icons so no need to load 3rd party CSS font icons.

CSS Unicode Star Rating

CSS Unicode Star RatingGet Snippet

No Javascript, no images, no icon fonts.

Ratings with Emojis

Pure CSS RatingGet snippet

A rating snippet with facebook emojis. Used .png image files for emojis, no need to load font awesome or 3rd party libraries.

Emoticon Star Rating

Emoticon Star RatingGet snippet

Emoticon five-star rating through Font Awesome in pure CSS.

Pure CSS Rating

Pure CSS Rating via CSS Custom Properties as APIGet snippet

Pure CSS rating via CSS custom properties as API.

Stars.CSS

starsGet snippet

Nice star rating with font-awesome.css.

Pure CSS 5-Star Rating

Pure CSS 5-Star RatingGet snippet

Used FontAwesome icons and Pure CSS star rating that works without reversing the order of inputs.

Standalone SVG CSS-only star rating component

Standalone SVG CSS-only star rating componentGet snippet

This is a CSS-only component that dynamically generates each of the SVG icons to be used as background images for each of the stars

Pure CSS Star Rating

Pure CSS Star RatingGet snippet

Star ratings made with pure CSS. Stars will highlight on hover and you can also click on the star rating and display that rating. Made form input fields so the form can be processed.

Star rating for email

Star rating for emailGet snippet

star rating system that works in email clients (including Gmail!) Hovering over the stars fills in the correct amount. Each star is an anchor tag which can then be linked to different rating URLs.

Rating in pure HTML5/CSS3

Rating in pure HTML5/CSS3Get snippet

Simple rating snippet with reset option using FontAwesome icons.

Rating Stars with no JS

Rating Stars with no JSGet Snippet

Minimal CSS rating snippet with Unicode. Supports IE7+.

Stars and hearts ratings

Stars and hearts ratingsGet snippet

Icons with HTML Unicode, Minimal code as well as the design.

CSS Rating Input

CSS Rating InputGet snippet

Pure CSS snippets with font awesome icons.

Pure CSS Rating Scale

Pure CSS Rating ScaleGet snippet

The rating with 0 to 10 scale. Made with pure HTML & CSS. Used radio buttons for rating numbers.