Free Section
Stat Milestone Counter Ribbon
A high-conversion 4-column metric ribbon with bold gradient typography, milestone labels, and sleek border dividers.
Colours in this gradient
#0b0f19#38bdf8#818cf8#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="stats-sec">
<div class="stats-container">
<div class="stat-col">
<div class="stat-num grad-blue">99.99%</div>
<div class="stat-label">System Uptime</div>
<div class="stat-sub">Zero scheduled downtime over 3 years</div>
</div>
<div class="stat-col">
<div class="stat-num grad-purple">120M+</div>
<div class="stat-label">API Calls Daily</div>
<div class="stat-sub">Across 180+ global server nodes</div>
</div>
<div class="stat-col">
<div class="stat-num grad-emerald">< 15ms</div>
<div class="stat-label">Edge Response Time</div>
<div class="stat-sub">Optimized with localized DNS routing</div>
</div>
<div class="stat-col">
<div class="stat-num grad-amber">4.9 / 5</div>
<div class="stat-label">Developer Rating</div>
<div class="stat-sub">From 14,000+ verified enterprise users</div>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a 4-column metric milestone statistics ribbon in HTML and CSS. Requirements: - Dark navy background (#0b0f19) with top and bottom borders. - 4 columns separated by subtle vertical borders. - Bold numbers using CSS background-clip: text gradient styling. - Responsive layout converting cleanly to 2 columns on tablet and 1 column on mobile. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with 4 equal columns and dividing right borders.
- 2
Apply gradient text using -webkit-background-clip: text and color: transparent.
- 3
Add media queries to drop dividing borders appropriately on responsive breakpoints.
Customisation tips
- Use clamp() for typography sizing so numbers fit comfortably on all mobile viewports.