Back to Snippets

Review Rating Breakdown CSS

Display a detailed summary of user reviews just like Amazon. This layout shows the percentage distribution of 5-star to 1-star ratings using simple progress bars and Flexbox.

428

#css

#rating

#reviews

#breakdown

#progress bar

#social proof

#ui

/HTML *CSS ()JS Output Live Updates

.rating-box {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 400px;
  display: flex;
  gap: 30px;
  align-items: center;
}
.rating-header {
  text-align: center;
}
.score {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
}
.stars {
  color: #fbbf24;
  font-size: 1.2rem;
  margin: 5px 0;
}
.rating-header p {
  color: #6b7280;
  font-size: 0.8rem;
  margin: 0;
}
.rating-bars {
  flex: 1;
}
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.star-label {
  font-size: 0.85rem;
  color: #4b5563;
  white-space: nowrap;
  width: 30px;
}
.bar-container {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #fbbf24;
  border-radius: 4px;
}
.count {
  font-size: 0.8rem;
  color: #6b7280;
  width: 30px;
  text-align: right;
}

<div class="rating-box">
  <div class="rating-header">
    <div class="score">4.8</div>
    <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <p>based on 2,453 reviews</p>
  </div>
  <div class="rating-bars">
    <div class="bar-row">
      <span class="star-label">5 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 80%"></div></div>
      <span class="count">80%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">4 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 12%"></div></div>
      <span class="count">12%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">3 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 5%"></div></div>
      <span class="count">5%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">2 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 2%"></div></div>
      <span class="count">2%</span>
    </div>
    <div class="bar-row">
      <span class="star-label">1 &#9733;</span>
      <div class="bar-container"><div class="bar-fill" style="width: 1%"></div></div>
      <span class="count">1%</span>
    </div>
  </div>
</div>

Review Rating Breakdown CSS

Share Code Snippet