35 Better CSS Star ratings for free

By | March 18, 2020

Pure hand-picked collections of HTML and CSS Star Ratings. Updated with 8 items on December 23, 2020.


Author

  • Rian Ariona
  • June 20, 2019

Made with

  • HTML / SCSS

About the Code

Simple CSS Emoji star rating

Inspired by Zheng’s Rate us 5 stars on Dribbble

More info: Link

Dependency:

Author

  • @pouretrebelle
  • January 12, 2014

Made with

  • Haml / SCSS / JavaScript

About the Code

Pure CSS Half-Star Rating

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • @christianhegedues
  • September 17, 2017

Made with

  • HTML / CSS / JavaScript

About the Code

Vue.js Star Rating

A simple Vue.js star rating component

More info: Link

Dependency: JS – Vue.js(v2.3.4), CSS – bulma(0.4.2)

Author

  • Fred Genkin
  • June 9, 2019

Made with

  • HTML / SCSS

About the Code

Tiny but accessible 5 star rating

More info: Link

Dependency:

Author

  • Estelle Weyl
  • February 10, 2020

Made with

  • HTML / CSS

About the Code

Rating made with radio buttons and no JS

More info: Link

Dependency:

Author

  • Jesse Couch
  • February 7, 2020

Made with

  • HTML / SCSS / JavaScript

About the Code

CSS Star Ratings: Part Deux

Did one of these a while back that used checkboxes and javascript. This one hooks into a radio button group and uses precisely ZERO js to drive the input UI.

It also uses a fun little trick with flex-direction row-reverse to drive the hover state.

The javascript is used to calculate an average of the two visible inputs and then style the average rating below. Pretty slick!

More info: Link

Dependency: CSS – font-awesome(v5.11.2), JS – jQuery(v3.4.1)

Author

  • Darin
  • January 10, 2020

Made with

  • HTML / SCSS / JavaScript

About the Code

Alien Rating Control

Wanted to take a stab at making an animated “css star rating” that is also accessible. It needs some more testing and tweaking with assistive technologies, but it’s in a good spot. The control is keyboard, mouse, and touch friendly, and also responds to the “prefers-reduced-motion” media query.

The avatar is SVG, created in Adobe Illustrator.

More info: Link

Dependency: gsap(3.0.5), MorphSVGPlugin3.min.js

Author

  • Gabriele Corti
  • May 20, 2019

Made with

  • Pug / CSS / JavaScript

About the Code

SVG Star Ratings

With pug and the <use> element. And a bit of JavaScript.

More info: Link

Dependency:

Author

  • alphardex
  • June 6, 2020

Made with

  • HTML / CSS

About the Code

CSS Star Rating

More info: Link

Dependency: aqua.min.css

Author

  • Melissa Em
  • May 28, 2016

Made with

  • HTML / CSS

About the Code

CSS Star Rating System with SVG <symbol> and <use>

I need to figure out a solution to the focus being brought to the last element (visually) first when using keyboard navigation.

More info: Link

Dependency:

Author

  • Deepak Kamat
  • March 7, 2018

Made with

  • HTML / CSS / Babel

About the Code

Rating Stars Widget with React

A little demonstration of a working star rating widget (re)created in ReactJS. Plug it in with your back-end logic and you are good to go. Customize the look with CSS and do amazing stuffs.

Use the component in your project freely, also when you do and it is up for public to see.

NOTE: The widget is not accessible, if you plan on using the code in a real-world product please make sure you add accessibility as necessary. 

More info: Link

Dependency: CSS – fontawesome(v5.0.6), JS – react-with-addons(v0.14.7), react-dom(0.14.7), lodash(v4.17.5)

Author

  • Michael
  • January 10, 2017

Made with

  • HTML / Less

About the Code

CSS3 Star Rating

A CSS styled star rating component

More info: Link

Dependency:

Author

  • Yelp Devs
  • June 10, 2016

Made with

  • HTML / SCSS

About the Code

CSS Rating Stars

A demo showcasing a few nifty Scss tricks for mimicking Yelp’s rating stars with only CSS.

More info: Link

Dependency:

Author

  • Reece McDonald
  • January 4, 2016

Made with

  • Haml / SCSS / JavaScript

About the Code

Movie Card Interactive UI With Pure CSS3 Animation Rating

Using CSS3 only to animate and keep track of the rating

More info: Link

Dependency: jQuery(2.1.3), jquery-ui(1.11.2)

Author

  • brian knapp
  • August 12, 2019

Made with

  • HTML / Less / JavaScript

About the Code

SVG Star Rating

Star rating with SVG and mostly CSS. VERY light JS.

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • Tadaima
  • February 3, 2017

Made with

  • Pug / SCSS / JavaScript

About the Code

Ratings Inspiration

A couple of thoughts about rating interactions & animations

More info: Link

Dependency: CSS – RKQrdr.scss, JS – snap.svg(0.4.1)

Author

  • Tiberiu Raducea
  • April 10, 2017

Made with

  • HTML / SCSS / JavaScript

About the Code

Super simple star rating

Super simple star rating with a tiny bit of jquery.

More info: Link

Dependency: CSS – font-awesome(v4.7.0), JS – jQuery(3.1.1)

Author

  • Geoffrey Crofte
  • July 5, 2019

Made with

  • HTML / CSS

About the Code

Star Rating in CSS

No JS on this example of use.

More info: Link

Dependency:

Author

  • Joey Hoer
  • April 29, 2016

Made with

  • HTML / SCSS

About the Code

Star Rating Radio Techniques

Different techniques that can create a CSS star rating with hover and checked effects from radio buttons.

More info: Link

Dependency:

Author

  • Artur Sopelnik
  • January 2, 2018

Made with

  • HTML / SCSS / JavaScript

About the Code

Clean Star Rating

Clean Star Rating with less js

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • daniesy
  • January 25, 2014

Made with

  • HTML / CSS

About the Code

Full css3 only colorful css star ratings \w inputs

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • Rian Ariona
  • December 2, 2015

Made with

  • HTML / SCSS

About the Code

Pure CSS Star Rating

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.

More info: Link

Dependency:

Author

  • Adrian Lambertz
  • November 3, 2014

Made with

  • Haml / SCSS

About the Code

Apple AppStore styled star rating in pure HTML/CSS

I saw the appstore star rating system and asked myself if it is easy to build it in pure html and css. That’s my try. It works in IE9+, Safari, FF and Chrome. (reflection works webkit-only)

More info: Link

Dependency:

Author

  • Damián Muti
  • May 29, 2017

Made with

  • HTML / SCSS

About the Code

Standalone SVG CSS-only star rating component

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. For the rating value to be displayed, the “data-rating-value” HTML attribute must be updated and calculated rounding every 0.25 to reflect the proper rating.

More info: Link

Dependency:

Author

  • Oli
  • March 3, 2016

Made with

  • HTML / SCSS / JavaScript

About the Code

Vue.js star rating

More info: Link

Dependency: vue.js(1.0.17)

Author

  • Andrea Crawford
  • February 4, 2018

Made with

  • HTML / SCSS

About the Code

Pure CSS 5-Star Rating

More info: Link

Dependency:

Author

  • Filcp
  • September 3, 2019

Made with

  • HTML / SCSS / JavaScript

About the Code

Percentage Based Star Rating With Font Awesome

I was working on a personal recipes website and wanted to add a simple percentage based star rating using Font Awesome icons. It needed to work in a way that I could add the rating percentage for each recipe to the html and make it reflect in the stars.

There probably must be similar or even better ways to do it out there, but I searched through the web and could only find css star ratings that the user would be clicking in the stars to give their own rating, or the rating didn’t use font awesome. So I created this piece of code myself and thought of sharing with whoever needs it.

More info: Link

Dependency: fontawesome

Author

  • ahmed beheiry
  • June 26, 2020

Made with

  • HTML / CSS

About the Code

Star Rating | Pure CSS

Awesome Star Rating using Pure CSS!

Just hover over the star and give it a rate. Just like that!

To change your rate all you have to do is to click again on the star you clicked before to give the rate it’ll clear the rate ( return all-stars not selected ) so you can rate again 😉

More info: Link

Dependency: font-awesome(4.7.0)

Author

  • Maxx Scholten
  • February 29, 2016

Made with

  • HTML / CSS

About the Code

Star rating for email

A 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 (ex: http://www.example.com?rating=5).

This rating system depends on the General Sibling selector (~) which has some unsupported performance. Be sure that your mail client is not stripping out the general sibling selector on send (I have noticed this when using MailChimp to send, however, Pardot does not seem to strip the selector). Currently does not work on the Google Inbox web app 🙁

More info: Link

Dependency:

Author

  • Marcus Burnette
  • April 30, 2015

Made with

  • HTML / SCSS

About the Code

CSS-only Star Rating

The goal was to create a radio button-powered star rating widget that uses CSS only. I wanted each star preceding the selected one to appear selected as well.

More info: Link

Dependency: CSS – font-awesome(v4.3.0), JS – jQuery(v2.1.3)

Author

  • Zach Reed
  • March 23, 2016

Made with

  • HTML / Less

About the Code

Percentage based css star ratings

Getting a star rating using a %

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • James Barnett
  • December 8, 2013

Made with

  • HTML / CSS

About the Code

Pure CSS Star Rating Widget

More info: Link

Dependency: jQuery(v2.1.3)

Author

  • Envato Tuts+
  • October 2, 2017

Made with

  • HTML / CSS / JavaScript

About the Code

A Simple JavaScript Method For Filling CSS Star Ratings

More info: Link

Dependency: font-awesome(v4.7.0)

Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.