21 CSS Star Ratings

About the code

Simple Star Rating

HTML and CSS simple star rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Pure CSS Star Ratings

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

About the code

Star Rating

Star rating in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Rating

Pure CSS rating via CSS custom properties as API.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

5-Star Rating

Pure CSS 5-star rating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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: -

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

About the code

Rate Star Buttons

Pure CSS rate star buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

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: -

About the code

CSS Unicode Star Rating

No Javascript, no images, no icon fonts.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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: -

About the code

Stars for Rating

Nice star rating with font-awesome.css.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

Rating System

Only CSS rating system.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

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: -

About the code

Star Rating Widget

Pure CSS star rating widget.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Pure CSS3 Rating

Flat pure CSS3 rating system.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

About the code

Ratings

Stars and hearts ratings.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS3 Star Rating

A CSS styled star rating component.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Stars Rating System

Full CSS3 only colorful star ratings with inputs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -