|$ curl https://forge-ai.dev/api/markdown?path=docs/components/rating
$cat docs/rating.md
updated Recently·10 min read·published
Rating
Rating components let users view or provide a score. These examples cover five-star ratings, half-star precision, custom icons (hearts, thumbs, flames), read-only display, interactive hover states, multiple sizes, review breakdowns with bar charts, and the CSS gradient technique that powers proportional fill without JavaScript.
Basic Star Rating
Standard five-star rating display using a CSS custom property--rating with a linear gradient. Filled stars indicate the score, empty stars show the remaining range. Pure CSS with no JavaScript required for read-only display.
basic-star-rating
Live
untitled.html
HTML
| 1 | <div class="rating-demo"> |
| 2 | <div class="rating-group"> |
| 3 | <span class="stars" style="--rating:5" aria-label="5 out of 5 stars"> |
| 4 | ★★★★★ |
| 5 | </span> |
| 6 | <span class="rating-value"> |
| 7 | 5.0 |
| 8 | </span> |
| 9 | <span class="rating-text"> |
| 10 | Excellent |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="rating-group"> |
| 14 | <span class="stars" style="--rating:4" aria-label="4 out of 5 stars"> |
| 15 | ★★★★★ |
| 16 | </span> |
| 17 | <span class="rating-value"> |
| 18 | 4.0 |
| 19 | </span> |
| 20 | <span class="rating-text"> |
| 21 | Very Good |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="rating-group"> |
| 25 | <span class="stars" style="--rating:3" aria-label="3 out of 5 stars"> |
| 26 | ★★★★★ |
| 27 | </span> |
| 28 | <span class="rating-value"> |
| 29 | 3.0 |
| 30 | </span> |
| 31 | <span class="rating-text"> |
| 32 | Good |
| 33 | </span> |
| 34 | </div> |
| 35 | <div class="rating-group"> |
| 36 | <span class="stars" style="--rating:2.5" aria-label="2.5 out of 5 stars"> |
| 37 | ★★★★★ |
| 38 | </span> |
| 39 | <span class="rating-value"> |
| 40 | 2.5 |
| 41 | </span> |
| 42 | <span class="rating-text"> |
| 43 | Fair |
| 44 | </span> |
| 45 | </div> |
| 46 | <div class="rating-group"> |
| 47 | <span class="stars" style="--rating:1" aria-label="1 out of 5 stars"> |
| 48 | ★★★★★ |
| 49 | </span> |
| 50 | <span class="rating-value"> |
| 51 | 1.0 |
| 52 | </span> |
| 53 | <span class="rating-text"> |
| 54 | Poor |
| 55 | </span> |
| 56 | </div> |
| 57 | </div> |
untitled.css
CSS
| 1 | .rating-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:8px; |
| 5 | padding:20px 24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .rating-group { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | gap:10px |
| 13 | } |
| 14 | .stars { |
| 15 | --rating:0; |
| 16 | --star-size:18px; |
| 17 | --star-color:#333; |
| 18 | --star-fill:#EAB308; |
| 19 | font-size:var(--star-size); |
| 20 | letter-spacing:2px; |
| 21 | line-height:1; |
| 22 | color:var(--star-color); |
| 23 | background:linear-gradient(90deg, |
| 24 | var(--star-fill) calc(var(--rating)/5*100%), |
| 25 | var(--star-color) calc(var(--rating)/5*100%)); |
| 26 | -webkit-background-clip:text; |
| 27 | -webkit-text-fill-color:transparent; |
| 28 | background-clip:text; |
| 29 | display:inline-block; |
| 30 | font-style:normal |
| 31 | } |
| 32 | .rating-value { |
| 33 | font-size:13px; |
| 34 | color:#E0E0E0; |
| 35 | font-weight:600; |
| 36 | min-width:24px |
| 37 | } |
| 38 | .rating-text { |
| 39 | font-size:12px; |
| 40 | color:#808080; |
| 41 | min-width:80px |
| 42 | } |
Interactive Rating
Clickable star rating with hover preview. Hovering over a star highlights all stars up to that position. Clicking sets the value and displays a text label. Uses ARIA radio group pattern for accessibility.
interactive-rating
Live
untitled.html
HTML
| 1 | <div class="interactive-rating-wrap"> |
| 2 | <div class="star-rating" id="star-rating" role="radiogroup" |
| 3 | aria-label="Rate this product"> |
| 4 | <button class="star" data-value="1" aria-label="1 star" |
| 5 | role="radio" aria-checked="false"> |
| 6 | ★ |
| 7 | </button> |
| 8 | <button class="star" data-value="2" aria-label="2 stars" |
| 9 | role="radio" aria-checked="false"> |
| 10 | ★ |
| 11 | </button> |
| 12 | <button class="star" data-value="3" aria-label="3 stars" |
| 13 | role="radio" aria-checked="false"> |
| 14 | ★ |
| 15 | </button> |
| 16 | <button class="star" data-value="4" aria-label="4 stars" |
| 17 | role="radio" aria-checked="false"> |
| 18 | ★ |
| 19 | </button> |
| 20 | <button class="star" data-value="5" aria-label="5 stars" |
| 21 | role="radio" aria-checked="false"> |
| 22 | ★ |
| 23 | </button> |
| 24 | </div> |
| 25 | <p class="rating-label" id="rating-output"> |
| 26 | Click a star to rate |
| 27 | </p> |
| 28 | </div> |
untitled.css
CSS
| 1 | .interactive-rating-wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | align-items:center; |
| 5 | gap:12px; |
| 6 | padding:24px; |
| 7 | font-family:system-ui, |
| 8 | sans-serif |
| 9 | } |
| 10 | .star-rating { |
| 11 | display:flex; |
| 12 | gap:4px |
| 13 | } |
| 14 | .star { |
| 15 | font-size:28px; |
| 16 | background:none; |
| 17 | border:none; |
| 18 | color:#333; |
| 19 | cursor:pointer; |
| 20 | transition:color .15s, |
| 21 | transform .15s; |
| 22 | padding:2px; |
| 23 | line-height:1 |
| 24 | } |
| 25 | .star:hover { |
| 26 | transform:scale(1.2) |
| 27 | } |
| 28 | .star.active { |
| 29 | color:#EAB308 |
| 30 | } |
| 31 | .star:hover, |
| 32 | .star.hover { |
| 33 | color:#EAB308 |
| 34 | } |
| 35 | .rating-label { |
| 36 | font-size:12px; |
| 37 | color:#808080; |
| 38 | margin:0; |
| 39 | text-align:center; |
| 40 | min-height:18px |
| 41 | } |
untitled.js
JavaScript
| 1 | const rating=document.getElementById('star-rating'); |
| 2 | const output=document.getElementById('rating-output'); |
| 3 | const labels=['Poor','Fair','Good','Very Good','Excellent']; |
| 4 | let selected=0; |
| 5 | rating.querySelectorAll('.star').forEach(star=>{ |
| 6 | star.addEventListener('mouseenter',()=>{ |
| 7 | const val=parseInt(star.dataset.value); |
| 8 | rating.querySelectorAll('.star').forEach((s,i)=>{ |
| 9 | s.classList.toggle('hover',i<val); |
| 10 | }); |
| 11 | }); |
| 12 | star.addEventListener('mouseleave',()=>{ |
| 13 | rating.querySelectorAll('.star').forEach(s=>s.classList.remove('hover')); |
| 14 | }); |
| 15 | star.addEventListener('click',()=>{ |
| 16 | selected=parseInt(star.dataset.value); |
| 17 | rating.querySelectorAll('.star').forEach((s,i)=>{ |
| 18 | s.classList.toggle('active',i<selected); |
| 19 | s.setAttribute('aria-checked',i<selected?'true':'false'); |
| 20 | }); |
| 21 | output.textContent=selected+' star'+(selected!==1?'s':'')+' — '+labels[selected-1]; |
| 22 | }); |
| 23 | }) |
Half-Star Precision
Half-star ratings for more precise scoring. Each star splits into two clickable halves using CSS clip-path. The left half sets a .5 value, the right half sets the full integer. This gives 10 discrete rating levels.
half-star-rating
Live
untitled.html
HTML
| 1 | <div class="half-demo"> |
| 2 | <div class="half-stars" id="half-rating" aria-label="Rate 3.5 out of 5"> |
| 3 | <button class="half-star left" data-val="0.5" aria-label="0.5"> |
| 4 | ★ |
| 5 | </button> |
| 6 | <button class="half-star right" data-val="1" aria-label="1"> |
| 7 | ★ |
| 8 | </button> |
| 9 | <button class="half-star left" data-val="1.5" aria-label="1.5"> |
| 10 | ★ |
| 11 | </button> |
| 12 | <button class="half-star right" data-val="2" aria-label="2"> |
| 13 | ★ |
| 14 | </button> |
| 15 | <button class="half-star left active" data-val="2.5" aria-label="2.5"> |
| 16 | ★ |
| 17 | </button> |
| 18 | <button class="half-star right active" data-val="3" aria-label="3"> |
| 19 | ★ |
| 20 | </button> |
| 21 | <button class="half-star left active" data-val="3.5" aria-label="3.5"> |
| 22 | ★ |
| 23 | </button> |
| 24 | <button class="half-star right" data-val="4" aria-label="4"> |
| 25 | ★ |
| 26 | </button> |
| 27 | <button class="half-star left" data-val="4.5" aria-label="4.5"> |
| 28 | ★ |
| 29 | </button> |
| 30 | <button class="half-star right" data-val="5" aria-label="5"> |
| 31 | ★ |
| 32 | </button> |
| 33 | </div> |
| 34 | <p class="half-output"> |
| 35 | 3.5 / 5 |
| 36 | </p> |
| 37 | </div> |
untitled.css
CSS
| 1 | .half-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | align-items:center; |
| 5 | gap:12px; |
| 6 | padding:24px; |
| 7 | font-family:system-ui, |
| 8 | sans-serif |
| 9 | } |
| 10 | .half-stars { |
| 11 | display:flex; |
| 12 | font-size:24px; |
| 13 | line-height:1 |
| 14 | } |
| 15 | .half-star { |
| 16 | background:none; |
| 17 | border:none; |
| 18 | padding:0 1px; |
| 19 | cursor:pointer; |
| 20 | color:#333; |
| 21 | transition:color .1s; |
| 22 | line-height:1; |
| 23 | width:14px; |
| 24 | overflow:hidden |
| 25 | } |
| 26 | .half-star.left { |
| 27 | clip-path:inset(0 50% 0 0) |
| 28 | } |
| 29 | .half-star.right { |
| 30 | clip-path:inset(0 0 0 50%); |
| 31 | margin-left:-14px |
| 32 | } |
| 33 | .half-star.active { |
| 34 | color:#EAB308 |
| 35 | } |
| 36 | .half-star:hover { |
| 37 | color:#EAB308 |
| 38 | } |
| 39 | .half-output { |
| 40 | font-size:14px; |
| 41 | color:#A0A0A0; |
| 42 | font-weight:600; |
| 43 | margin:0 |
| 44 | } |
untitled.js
JavaScript
| 1 | document.getElementById('half-rating').addEventListener('click',e=>{ |
| 2 | const btn=e.target.closest('.half-star'); |
| 3 | if(!btn)return; |
| 4 | const val=parseFloat(btn.dataset.val); |
| 5 | document.querySelectorAll('.half-star').forEach(s=>{ |
| 6 | s.classList.toggle('active',parseFloat(s.dataset.val)<=val); |
| 7 | }); |
| 8 | document.querySelector('.half-output').textContent=val+' / 5'; |
| 9 | }) |
Custom Icons — Hearts & Thumbs
Replace stars with any icon — hearts for favorites, thumbs for likes, or custom emoji for brand-specific scoring. The gradient clip technique works with any repeated character, making it trivially customizable.
custom-icon-rating
Live
untitled.html
HTML
| 1 | <div class="custom-rating-demo"> |
| 2 | <div class="custom-group"> |
| 3 | <span class="heart-stars" style="--rating:4" aria-label="4 out of 5"> |
| 4 | ♥♥♥♥♥ |
| 5 | </span> |
| 6 | <span class="custom-label"> |
| 7 | Favorite |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="custom-group"> |
| 11 | <span class="thumb-stars" style="--rating:3" aria-label="3 out of 5"> |
| 12 | 👍👍👍👍👍 |
| 13 | </span> |
| 14 | <span class="custom-label"> |
| 15 | Like |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="custom-group"> |
| 19 | <span class="flame-stars" style="--rating:5" aria-label="5 out of 5"> |
| 20 | 🔥🔥🔥🔥🔥 |
| 21 | </span> |
| 22 | <span class="custom-label"> |
| 23 | Hot |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.css
CSS
| 1 | .custom-rating-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:12px; |
| 5 | padding:24px 24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .custom-group { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | gap:12px |
| 13 | } |
| 14 | .heart-stars { |
| 15 | --rating:0; |
| 16 | --fill:#EF4444; |
| 17 | --empty:#333; |
| 18 | font-size:20px; |
| 19 | letter-spacing:2px; |
| 20 | line-height:1; |
| 21 | background:linear-gradient(90deg, |
| 22 | var(--fill) calc(var(--rating)/5*100%), |
| 23 | var(--empty) calc(var(--rating)/5*100%)); |
| 24 | -webkit-background-clip:text; |
| 25 | -webkit-text-fill-color:transparent; |
| 26 | background-clip:text; |
| 27 | display:inline-block |
| 28 | } |
| 29 | .thumb-stars { |
| 30 | --rating:0; |
| 31 | --fill:#3B82F6; |
| 32 | --empty:#333; |
| 33 | font-size:20px; |
| 34 | letter-spacing:2px; |
| 35 | line-height:1; |
| 36 | background:linear-gradient(90deg, |
| 37 | var(--fill) calc(var(--rating)/5*100%), |
| 38 | var(--empty) calc(var(--rating)/5*100%)); |
| 39 | -webkit-background-clip:text; |
| 40 | -webkit-text-fill-color:transparent; |
| 41 | background-clip:text; |
| 42 | display:inline-block |
| 43 | } |
| 44 | .flame-stars { |
| 45 | --rating:0; |
| 46 | --fill:#F97316; |
| 47 | --empty:#333; |
| 48 | font-size:20px; |
| 49 | letter-spacing:2px; |
| 50 | line-height:1; |
| 51 | background:linear-gradient(90deg, |
| 52 | var(--fill) calc(var(--rating)/5*100%), |
| 53 | var(--empty) calc(var(--rating)/5*100%)); |
| 54 | -webkit-background-clip:text; |
| 55 | -webkit-text-fill-color:transparent; |
| 56 | background-clip:text; |
| 57 | display:inline-block |
| 58 | } |
| 59 | .custom-label { |
| 60 | font-size:11px; |
| 61 | color:#808080; |
| 62 | text-transform:uppercase; |
| 63 | letter-spacing:.5px; |
| 64 | font-weight:500 |
| 65 | } |
Sizes
Compact, default, large, and hero rating displays. Small ratings fit inline with product names in tables; large and hero ratings work as display elements on product detail pages and landing pages.
rating-sizes
Live
untitled.html
HTML
| 1 | <div class="size-demo"> |
| 2 | <div class="size-row"> |
| 3 | <span class="stars sm" style="--rating:4" aria-label="4 stars"> |
| 4 | ★★★★★ |
| 5 | </span> |
| 6 | <span class="size-label"> |
| 7 | Small (12px) |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="size-row"> |
| 11 | <span class="stars md" style="--rating:4" aria-label="4 stars"> |
| 12 | ★★★★★ |
| 13 | </span> |
| 14 | <span class="size-label"> |
| 15 | Default (18px) |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="size-row"> |
| 19 | <span class="stars lg" style="--rating:4" aria-label="4 stars"> |
| 20 | ★★★★★ |
| 21 | </span> |
| 22 | <span class="size-label"> |
| 23 | Large (28px) |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="size-row"> |
| 27 | <span class="stars xl" style="--rating:4" aria-label="4 stars"> |
| 28 | ★★★★★ |
| 29 | </span> |
| 30 | <span class="size-label"> |
| 31 | Hero (40px) |
| 32 | </span> |
| 33 | </div> |
| 34 | </div> |
untitled.css
CSS
| 1 | .size-demo { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:12px; |
| 5 | padding:24px 24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif |
| 8 | } |
| 9 | .size-row { |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | gap:16px |
| 13 | } |
| 14 | .stars { |
| 15 | --rating:0; |
| 16 | --star-color:#333; |
| 17 | --star-fill:#EAB308; |
| 18 | letter-spacing:2px; |
| 19 | line-height:1; |
| 20 | background:linear-gradient(90deg, |
| 21 | var(--star-fill) calc(var(--rating)/5*100%), |
| 22 | var(--star-color) calc(var(--rating)/5*100%)); |
| 23 | -webkit-background-clip:text; |
| 24 | -webkit-text-fill-color:transparent; |
| 25 | background-clip:text; |
| 26 | display:inline-block |
| 27 | } |
| 28 | .stars.sm { |
| 29 | font-size:12px |
| 30 | } |
| 31 | .stars.md { |
| 32 | font-size:18px |
| 33 | } |
| 34 | .stars.lg { |
| 35 | font-size:28px |
| 36 | } |
| 37 | .stars.xl { |
| 38 | font-size:40px; |
| 39 | letter-spacing:4px |
| 40 | } |
| 41 | .size-label { |
| 42 | font-size:12px; |
| 43 | color:#808080 |
| 44 | } |
With Review Breakdown
Pairing the star rating with a review count, average score, and rating distribution bar chart gives users full context. Common in product detail pages, app store listings, and marketplace reviews.
review-breakdown
Live
untitled.html
HTML
| 1 | <div class="review-demo"> |
| 2 | <div class="review-card"> |
| 3 | <div class="review-header"> |
| 4 | <span class="review-score"> |
| 5 | 4.7 |
| 6 | </span> |
| 7 | <div class="review-meta"> |
| 8 | <span class="stars" style="--rating:4.7" aria-label="4.7 stars"> |
| 9 | ★★★★★ |
| 10 | </span> |
| 11 | <span class="review-count"> |
| 12 | 2,847 reviews |
| 13 | </span> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="rating-bars"> |
| 17 | <div class="bar-row"> |
| 18 | <span class="bar-label"> |
| 19 | 5 |
| 20 | </span> |
| 21 | <div class="bar-track"> |
| 22 | <div class="bar-fill" style="width:68%"> |
| 23 | </div> |
| 24 | </div> |
| 25 | <span class="bar-count"> |
| 26 | 1,936 |
| 27 | </span> |
| 28 | </div> |
| 29 | <div class="bar-row"> |
| 30 | <span class="bar-label"> |
| 31 | 4 |
| 32 | </span> |
| 33 | <div class="bar-track"> |
| 34 | <div class="bar-fill" style="width:20%"> |
| 35 | </div> |
| 36 | </div> |
| 37 | <span class="bar-count"> |
| 38 | 569 |
| 39 | </span> |
| 40 | </div> |
| 41 | <div class="bar-row"> |
| 42 | <span class="bar-label"> |
| 43 | 3 |
| 44 | </span> |
| 45 | <div class="bar-track"> |
| 46 | <div class="bar-fill" style="width:7%"> |
| 47 | </div> |
| 48 | </div> |
| 49 | <span class="bar-count"> |
| 50 | 199 |
| 51 | </span> |
| 52 | </div> |
| 53 | <div class="bar-row"> |
| 54 | <span class="bar-label"> |
| 55 | 2 |
| 56 | </span> |
| 57 | <div class="bar-track"> |
| 58 | <div class="bar-fill" style="width:3%"> |
| 59 | </div> |
| 60 | </div> |
| 61 | <span class="bar-count"> |
| 62 | 85 |
| 63 | </span> |
| 64 | </div> |
| 65 | <div class="bar-row"> |
| 66 | <span class="bar-label"> |
| 67 | 1 |
| 68 | </span> |
| 69 | <div class="bar-track"> |
| 70 | <div class="bar-fill" style="width:2%"> |
| 71 | </div> |
| 72 | </div> |
| 73 | <span class="bar-count"> |
| 74 | 58 |
| 75 | </span> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | </div> |
untitled.css
CSS
| 1 | .review-demo { |
| 2 | padding:20px 24px; |
| 3 | font-family:system-ui, |
| 4 | sans-serif |
| 5 | } |
| 6 | .review-card { |
| 7 | max-width:300px |
| 8 | } |
| 9 | .review-header { |
| 10 | display:flex; |
| 11 | gap:16px; |
| 12 | align-items:flex-start; |
| 13 | margin-bottom:16px |
| 14 | } |
| 15 | .review-score { |
| 16 | font-size:40px; |
| 17 | font-weight:800; |
| 18 | color:#E0E0E0; |
| 19 | line-height:1 |
| 20 | } |
| 21 | .review-meta { |
| 22 | display:flex; |
| 23 | flex-direction:column; |
| 24 | gap:4px |
| 25 | } |
| 26 | .stars { |
| 27 | --rating:0; |
| 28 | --star-color:#333; |
| 29 | --star-fill:#EAB308; |
| 30 | font-size:14px; |
| 31 | letter-spacing:1px; |
| 32 | line-height:1; |
| 33 | background:linear-gradient(90deg, |
| 34 | var(--star-fill) calc(var(--rating)/5*100%), |
| 35 | var(--star-color) calc(var(--rating)/5*100%)); |
| 36 | -webkit-background-clip:text; |
| 37 | -webkit-text-fill-color:transparent; |
| 38 | background-clip:text; |
| 39 | display:inline-block |
| 40 | } |
| 41 | .review-count { |
| 42 | font-size:11px; |
| 43 | color:#808080 |
| 44 | } |
| 45 | .rating-bars { |
| 46 | display:flex; |
| 47 | flex-direction:column; |
| 48 | gap:6px |
| 49 | } |
| 50 | .bar-row { |
| 51 | display:flex; |
| 52 | align-items:center; |
| 53 | gap:8px |
| 54 | } |
| 55 | .bar-label { |
| 56 | font-size:11px; |
| 57 | color:#808080; |
| 58 | width:10px; |
| 59 | text-align:right; |
| 60 | flex-shrink:0 |
| 61 | } |
| 62 | .bar-track { |
| 63 | flex:1; |
| 64 | height:8px; |
| 65 | background:#1A1A1A; |
| 66 | border-radius:4px; |
| 67 | overflow:hidden |
| 68 | } |
| 69 | .bar-fill { |
| 70 | height:100%; |
| 71 | background:#EAB308; |
| 72 | border-radius:4px; |
| 73 | transition:width .5s ease |
| 74 | } |
| 75 | .bar-count { |
| 76 | font-size:10px; |
| 77 | color:#666; |
| 78 | min-width:32px; |
| 79 | flex-shrink:0; |
| 80 | text-align:right |
| 81 | } |
Read-Only vs Interactive
Side-by-side comparison of read-only (display only, no hover effects) and interactive (clickable, hover preview) ratings. Usepointer-events: none on read-only variants to prevent hover and click interactions.
read-only-vs-interactive
Live
untitled.html
HTML
| 1 | <div class="compare-demo"> |
| 2 | <div class="compare-col"> |
| 3 | <span class="compare-label"> |
| 4 | Read-Only |
| 5 | </span> |
| 6 | <span class="stars readonly" style="--rating:3.5" aria-label="3.5 stars"> |
| 7 | ★★★★★ |
| 8 | </span> |
| 9 | <span class="compare-value"> |
| 10 | 3.5 — Good |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="compare-divider"> |
| 14 | </div> |
| 15 | <div class="compare-col"> |
| 16 | <span class="compare-label"> |
| 17 | Interactive |
| 18 | </span> |
| 19 | <span class="stars interactive-stars" aria-label="Click to rate"> |
| 20 | <span class="i-star on"> |
| 21 | ★ |
| 22 | </span> |
| 23 | <span class="i-star on"> |
| 24 | ★ |
| 25 | </span> |
| 26 | <span class="i-star on"> |
| 27 | ★ |
| 28 | </span> |
| 29 | <span class="i-star hoverable"> |
| 30 | ★ |
| 31 | </span> |
| 32 | <span class="i-star hoverable"> |
| 33 | ★ |
| 34 | </span> |
| 35 | </span> |
| 36 | <span class="compare-value"> |
| 37 | Click to rate |
| 38 | </span> |
| 39 | </div> |
| 40 | </div> |
untitled.css
CSS
| 1 | .compare-demo { |
| 2 | display:flex; |
| 3 | align-items:center; |
| 4 | gap:0; |
| 5 | padding:24px; |
| 6 | font-family:system-ui, |
| 7 | sans-serif; |
| 8 | justify-content:center |
| 9 | } |
| 10 | .compare-col { |
| 11 | display:flex; |
| 12 | flex-direction:column; |
| 13 | align-items:center; |
| 14 | gap:8px; |
| 15 | padding:0 32px |
| 16 | } |
| 17 | .compare-label { |
| 18 | font-size:10px; |
| 19 | color:#555; |
| 20 | text-transform:uppercase; |
| 21 | letter-spacing:.5px; |
| 22 | font-weight:600 |
| 23 | } |
| 24 | .compare-value { |
| 25 | font-size:11px; |
| 26 | color:#808080 |
| 27 | } |
| 28 | .compare-divider { |
| 29 | width:1px; |
| 30 | height:60px; |
| 31 | background:#222; |
| 32 | flex-shrink:0 |
| 33 | } |
| 34 | .stars.readonly { |
| 35 | --rating:3.5; |
| 36 | --star-size:20px; |
| 37 | --star-color:#333; |
| 38 | --star-fill:#EAB308; |
| 39 | font-size:var(--star-size); |
| 40 | letter-spacing:2px; |
| 41 | line-height:1; |
| 42 | background:linear-gradient(90deg, |
| 43 | var(--star-fill) calc(var(--rating)/5*100%), |
| 44 | var(--star-color) calc(var(--rating)/5*100%)); |
| 45 | -webkit-background-clip:text; |
| 46 | -webkit-text-fill-color:transparent; |
| 47 | background-clip:text; |
| 48 | display:inline-block; |
| 49 | pointer-events:none |
| 50 | } |
| 51 | .interactive-stars { |
| 52 | display:flex; |
| 53 | gap:2px |
| 54 | } |
| 55 | .i-star { |
| 56 | font-size:20px; |
| 57 | color:#333; |
| 58 | cursor:pointer; |
| 59 | transition:color .15s, |
| 60 | transform .15s |
| 61 | } |
| 62 | .i-star.on { |
| 63 | color:#EAB308 |
| 64 | } |
| 65 | .i-star.hoverable:hover { |
| 66 | color:#EAB308; |
| 67 | transform:scale(1.15) |
| 68 | } |
CSS Gradient Technique
The star rating uses a CSS custom property--rating with a linear gradient andbackground-clip: text. The gradient fills stars proportionally based on the rating value — no JavaScript needed for read-only display.
star-rating.css
CSS
| 1 | .stars { |
| 2 | --rating: 0; |
| 3 | --star-size: 18px; |
| 4 | --star-color: #333; |
| 5 | --star-fill: #EAB308; |
| 6 | |
| 7 | font-size: var(--star-size); |
| 8 | letter-spacing: 2px; |
| 9 | line-height: 1; |
| 10 | color: var(--star-color); |
| 11 | background: linear-gradient( |
| 12 | 90deg, |
| 13 | var(--star-fill) calc(var(--rating) / 5 * 100%), |
| 14 | var(--star-color) calc(var(--rating) / 5 * 100%) |
| 15 | ); |
| 16 | -webkit-background-clip: text; |
| 17 | -webkit-text-fill-color: transparent; |
| 18 | background-clip: text; |
| 19 | display: inline-block; |
| 20 | } |
ℹ
info
The CSS gradient technique is ideal for read-only ratings. For interactive ratings, use JavaScript to toggle classes and setaria-checkedon each star. Always provide a text fallback (e.g., "4.5 out of 5 stars") for screen readers.
✓
best practice
When using custom icons (hearts, thumbs), ensure the empty state is visible against the background. Use #333 on dark themes and #DDD on light backgrounds. The icon character must have a consistent width for the gradient clip to align correctly across all ratings.
Best Practices
- Always provide aria-label or visible text with the rating for accessibility.
- Use role="radiogroup" and role="radio" with aria-checked for interactive ratings.
- Display the numeric score alongside stars — color-blind users may not distinguish filled from empty.
- For half-star ratings, ensure each half has a distinct click target and hover state.
- Use pointer-events: none on read-only ratings to prevent hover effects.
- On mobile, increase touch targets to at least 44×44px per star.
- Consider showing a review breakdown (bar chart) alongside the average for transparency.