1. Essentials

27 CSS Star Ratings

Pure hand-picked HTML and CSS Star Ratings collections. Demo and Downloads are available.

Stars rating animation

Animated stars in star rating

Demo / Tutorial

Developed By: Aaron Iker

  • Created SEPTEMBER 19, 2019
  • Made with HTML (Pug), CSS (SCSS), JS

Awesome jQuery rating with font awesome

27 CSS Star Ratings 1
Demo Image: Awesome jQuery rating with font awesome

jquery rating with font awesome.

Demo / Tutorial

Developed By: shahjehan

  • Created DECEMBER 10, 2014 // Updated MAY 26, 2015
  • Made with HTML, CSS, JS

Ratyli: jQuery Rating Plugin

27 CSS Star Ratings 2
Demo Image: Ratyli: jQuery Rating Plugin

simple jquery rating library. With this small query plugin you can create star rating with custom icons and callbacks.

Demo / Tutorial

Developed By: Peter Varga

  • Created FEBRUARY 03, 2015 // Updated DECEMBER 19, 2015
  • Made with HTML, CSS, JS

Star rating

27 CSS Star Ratings 3
Demo Image: Star rating

Rate your posts, articles or whatever with stars, because stars is always cool!.

Demo / Tutorial

Developed By: Arnau Lacambra

  • Created FEBRUARY 24, 2015 // Updated APRIL 24, 2015
  • Made with HTML, CSS, JS

CSS only star rating

27 CSS Star Ratings 4

A basic star rating CSS only.

Demo / Tutorial

Developed By: Gabi

  • Created MARCH 09, 2015 // Updated JANUARY 17, 2016
  • Made with HTML, CSS

Star rating for email

27 CSS Star Ratings 5
Demo Image: 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 webapp

Demo / Tutorial

Developed By: Maxx Scholten

  • Created MARCH 26, 2015 // Updated MARCH 01, 2016
  • Made with HTML, CSS

CSS-only Star Rating

27 CSS Star Ratings 6
Demo Image: 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.

Demo / Tutorial

Developed By: Marcus Burnette

  • Created APRIL 30, 2015
  • Made with HTML, SCSS

Angular.js Star Rating Directive

27 CSS Star Ratings 7
Demo Image: Angular.js Star Rating Directive

Rating stars in angular js using directive.

Demo / Tutorial

Developed By: Andrew Archibald

  • Created JULY 01, 2014 // Updated APRIL 21, 2017
  • Made with HTML, SCSS, JS (Angular.js)

Simple Star rating

27 CSS Star Ratings 8
Demo Image: Simple Star rating

A simple star rating example with some CSS transitions

Demo / Tutorial

Developed By: Giel Berkers

  • Created MAY 29, 2015
  • Made with HTML, CSS, JS

Pure CSS Star Rating

27 CSS Star Ratings 9
Demo Image: Pure CSS Star Rating

Demo / Tutorial

Developed By: Andy

  • Created JUNE 02, 2015
  • Made with HTML, Less

CSS Unicode Star Rating

27 CSS Star Ratings 10
Demo Image: CSS Unicode Star Rating

No Javascript, No images, No Icon Fonts.

Demo / Tutorial

Developed By: Joseph Fusco

  • Created MAY 04, 2015 // Updated JUNE 30, 2016
  • Made with HTML, SCSS

Rating in pure HTML5/CSS3

27 CSS Star Ratings 11
Demo Image: Rating in pure HTML5/CSS3

Rating form coding by HTML5/CSS3, not with Javascript.

Demo / Tutorial

Developed By: Khoné Vongsouthi

  • Created FEBRUARY 01, 2014 // Updated FEBRUARY 24, 2014
  • Made with HTML, Less

5* HOVER

27 CSS Star Ratings 12
Demo Image: 5* HOVER

hover and stars.

Demo / Tutorial

Developed By: Yusuf Bakır

  • Created AUGUST 07, 2015 // Updated JUNE 28, 2019
  • Made with HTML, CSS, JS

WooCommerce CSS SVG Star Rating

27 CSS Star Ratings 13
Demo Image: WooCommerce CSS SVG Star Rating

Retina ready and easy customizable.

Demo / Tutorial

Developed By: Jan Wagner

  • Created AUGUST 07, 2015 // Updated JUNE 28, 2019
  • Made with HTML, Less

Star Rating Animation

27 CSS Star Ratings 14
Demo Image: Star Rating Animation

JS is only used to add 2 classes so it preserves the state after user selects a rating. It could most likely be done via the label / radio input method.

Demo / Tutorial

Developed By: Roxy

  • Created SEPTEMBER 23, 2015 // Updated SEPTEMBER 25, 2015
  • Made with HTML, SCSS, JS

CSS (mostly) Rating System

27 CSS Star Ratings 15
Demo Image: CSS (mostly) Rating System

JS is only used to add 2 classes so it preserves the state after user selects a rating. It could most likely be done via the label / radio input method.

Demo / Tutorial

Developed By: Codrin Pavel

  • Created FEBRUARY 10, 2016
  • Made with HTML, CSS, JS

CSS: Radio Input Stars

27 CSS Star Ratings 16
Demo Image: CSS: Radio Input Stars

Styling rating stars with radio inputs.

Demo / Tutorial

Developed By: Jake Albaugh

  • Created FEBRUARY 22, 2016 // Updated FEBRUARY 24, 2016
  • Made with HTML, SCSS

Star Rating with SVG Mask

27 CSS Star Ratings 17
Demo Image: Star Rating with SVG Mask

Using an SVG as a “mask” over top of a ‘meter’ element to fill in the stars. Change the “value” of the meter element (from 0-5) to set a new rating.

Demo / Tutorial

Developed By: Damon Bauer

  • Created APRIL 10, 2016 // Updated MARCH 14, 2018
  • Made with HTML, SCSS

Star Rating Component (HTML/CSS only)

27 CSS Star Ratings 18
Demo Image: Star Rating Component (HTML/CSS only)

A rating component for a form made using just HTML and CSS.

How it works

  • The stars are labels which each reference a radio button. They are written in the code in reverse order, 5-1.
  • By using display:flex and flex-direction:row-reverse on their container they appear in the browser the opposite way around, 1-5.
  • We can now use the general sibling selector ~ to style any subsequent elements – the ones that appear before on screen.

Demo / Tutorial

Developed By: Chris Smith

  • Created SEPTEMBER 17, 2017
  • Made with HTML, CSS

Vue.js Star Rating

27 CSS Star Ratings 19
Demo Image: Vue.js Star Rating

A simple Vue.js star rating component

Demo / Tutorial

Developed By: Christian Hegedüs

  • Created SEPTEMBER 17, 2017
  • Made with HTML, CSS, JavaScript (Vue.js)

Tiny but accessible 5 star rating

27 CSS Star Ratings 20
Demo Image: Tiny but accessible 5 star rating

Demo / Tutorial

Developed By: Fred Genkin

  • Created JUNE 03, 2019 // Updated JUNE 09, 2019
  • Made with HTML and SCSS

Simple star rating

27 CSS Star Ratings 21
Demo Image: Simple star rating

Demo / Tutorial

Developed By: Mert Cukuren

  • Created JUNE 20, 2019
  • Made with HTML and SCSS

Half-Star Rating

27 CSS Star Ratings 22
Demo Image: Half-Star Rating

build it in pure html and css. It works in IE9+, Safari, FF and Chrome. (reflection works webkit-only).

Demo / Tutorial

Developed By: Charlotte Dann

  • Created JULY 30, 2013 // Updated JANUARY 12, 2014
  • Made with Haml, SCSS and JavaScript

Apple AppStore styled star rating in pure HTML/CSS

27 CSS Star Ratings 23
Demo Image: Apple AppStore styled star rating in pure HTML/CSS

build it in pure html and css. It works in IE9+, Safari, FF and Chrome. (reflection works webkit-only).

Demo / Tutorial

Developed By: Adrian Lambertz

  • Created NOVEMBER 03, 2014
  • Made with Haml and SCSS

Star Rating

27 CSS Star Ratings 24
Demo Image: Star Rating

Little star rating slider thingy.

Demo / Tutorial

Developed By: Steve Marx

  • Created MAY 09, 2013 // Updated AUGUST 23, 2013
  • Made with HTML, SCSS and JavaScript

Star Rating Using <input type=range>

27 CSS Star Ratings 25
Demo Image: Star Rating Using <input type=range>

It has the added benefit of being able to drag mouse/finger from one star to another.

Demo / Tutorial

Developed By: Keith Chu

  • Created MAY 16, 2013
  • Made with HTML, CSS and JavaScript

5 Star Rating System

27 CSS Star Ratings 26
Demo Image: 5 Star Rating System

5 Star Rating System.

Demo / Tutorial

Developed By: Jared

  • Created OCTOBER 25, 2014
  • Made with HTML, CSS and JavaScript
https://www.w3tweaks.com/
Do you like CV's articles? Follow on social!