Back to Statistics JS counters Section
Statistics

Gradient Stats Grid

#stats

Live preview

Source code

html
<div class="container py-5">
  <div class="row g-4 text-white text-center">
    <div class="col-md-3">
      <div class="p-4 rounded-4" style="background:linear-gradient(135deg,#3b82f6,#06b6d4)">
        <h1 class="fw-bold mb-1" data-count="10000">0</h1>
        <p class="mb-0">Happy Users</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="p-4 rounded-4" style="background:linear-gradient(135deg,#ec4899,#f97316)">
        <h1 class="fw-bold mb-1" data-count="500">0</h1>
        <p class="mb-0">Components</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="p-4 rounded-4" style="background:linear-gradient(135deg,#10b981,#84cc16)">
        <h1 class="fw-bold mb-1" data-count="40">0</h1>
        <p class="mb-0">Countries</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="p-4 rounded-4" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">
        <h1 class="fw-bold mb-1" data-count="99">0</h1>
        <p class="mb-0">% Uptime</p>
      </div>
    </div>
  </div>
</div>

More designs in this section