Collection of hand-picked free HTML and CSS star rating code examples. Update of July 2019 collection. 6 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Simple Star Rating in CSS
Star rating system using HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Pure CSS Star Rating Widget
Pure CSS star rating widget with HTML and CSS. No JavaScipt.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Made with
- HTML / CSS (SCSS)
About the code
Simple Star Rating
HTML and CSS simple star rating.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Pure CSS Star Ratings
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Made with
- HTML / CSS (SCSS)
About the code
Star Rating
Star rating in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Pure CSS Rating
Pure CSS rating via CSS custom properties as API.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
5-Star Rating
Pure CSS 5-star rating.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (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, data-rating-value
HTML attribute must be updated and calculated rounding every 0.25
to reflect the proper rating.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Emoticon Star Rating
Emoticon five star rating through Font Awesome in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS (PostCSS)
About the code
Rate Star Buttons
Pure CSS rate star buttons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Star Rating System with SVG symbol
and use
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
CSS Rating System
A CSS rating system that changes the facial expression based on how many stars are chosen.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Star Rating
A simple, accessible, star rating.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -


Links
Made with
- HTML / CSS (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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Unicode Star Rating
No Javascript, no images, no icon fonts.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-only Star Rating
The goal was to create a radio button-powered star rating widget that uses CSS only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css


Links
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).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Stars for Rating
Nice star rating with font-awesome.css.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS
About the code
Rating System
Only CSS rating system.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (Less)
About the code
Rating in Pure HTML5/CSS3
Rating form coding by HTML5/CSS3, not with Javascript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css

Links
Made with
- HTML / CSS (Less)
About the code
Pure CSS Star Rating from 0 to 8 with Colored Points of the Star
You can rate from "0" to "8" in 0.5 steps. Just change the class of the div
to "zero", "zero half", "one", "one half", ...
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Star Rating Widget
Pure CSS star rating widget.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS3 Rating
Flat pure CSS3 rating system.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Star Rating in CSS
No JS on this example of use.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
Made with
- HTML / CSS (Less)
About the code
CSS3 Star Rating
A CSS styled star rating component.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Stars Rating System
Full CSS3 only colorful star ratings with inputs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -