Signal Bars
Four rectangles of increasing height — possibly the most iconic data visualization ever designed. Confidence, signal, relevance — whatever the product needs. Hover fills all bars to maximum.
Signal Bars the 19th of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="sig-stage">
<div class="sig-badge">
<div class="sig-bars-group">
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
</div>
<div class="sig-info">
<div class="sig-strength">Excellent</div>
<div class="sig-label">Confidence · 4 / 4</div>
</div>
</div>
<div class="sig-mini-set">
<div class="sig-row-mini">
<div class="sig-bars-mini">
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-inactive"></div>
</div>
<div class="sig-name-mini">Good · 3/4</div>
</div>
<div class="sig-row-mini">
<div class="sig-bars-mini">
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-inactive"></div>
<div class="sig-bar sig-inactive"></div>
</div>
<div class="sig-name-mini">Fair · 2/4</div>
</div>
<div class="sig-row-mini">
<div class="sig-bars-mini">
<div class="sig-bar sig-active"></div>
<div class="sig-bar sig-inactive"></div>
<div class="sig-bar sig-inactive"></div>
<div class="sig-bar sig-inactive"></div>
</div>
<div class="sig-name-mini">Weak · 1/4</div>
</div>
</div>
</div> .sig-stage {
background: #f5f4f2;
padding: 60px 48px;
display: flex;
flex-direction: column;
gap: 36px;
align-items: flex-start;
min-height: 360px;
}
.sig-badge {
display: inline-flex;
align-items: flex-end;
gap: 4px;
padding: 16px 20px 14px;
background: white;
border: 1px solid #e0ddd8;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
cursor: pointer;
position: relative;
}
.sig-badge:hover .sig-bar { background: #1a1612 !important; }
.sig-bars-group {
display: flex;
align-items: flex-end;
gap: 4px;
margin-right: 14px;
}
.sig-bar {
width: 8px;
border-radius: 1px;
transition: background 0.2s, height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sig-bars-group .sig-bar:nth-child(1) { height: 10px; }
.sig-bars-group .sig-bar:nth-child(2) { height: 18px; }
.sig-bars-group .sig-bar:nth-child(3) { height: 26px; }
.sig-bars-group .sig-bar:nth-child(4) { height: 34px; }
.sig-active { background: #1a1612; }
.sig-inactive { background: #dddbd6; }
.sig-info {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 2px;
}
.sig-strength {
font-family: Georgia, "Fraunces", serif;
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: #1a1612;
}
.sig-label {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #4a4239;
}
.sig-mini-set {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 4px;
}
.sig-row-mini {
display: flex;
align-items: center;
gap: 12px;
}
.sig-bars-mini {
display: flex;
align-items: flex-end;
gap: 2px;
}
.sig-bars-mini .sig-bar { width: 5px; }
.sig-bars-mini .sig-bar:nth-child(1) { height: 6px; }
.sig-bars-mini .sig-bar:nth-child(2) { height: 10px; }
.sig-bars-mini .sig-bar:nth-child(3) { height: 14px; }
.sig-bars-mini .sig-bar:nth-child(4) { height: 18px; }
.sig-name-mini {
font-family: system-ui, "Bricolage Grotesque", sans-serif;
font-size: 11px;
letter-spacing: 0.1em;
color: #4a4239;
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.sig-bar { transition: none; }
}