Instant CSS
Tools
Templates
Components
Learn
More
Wave Bars
Animation
Equalizer-style bars rising and falling.
Reset to Default
HTML
Copy HTML
<div class="wave"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS
Copy CSS
.wave { display: inline-flex; align-items: center; gap: 4px; height: 40px; } .wave span { width: 6px; height: 100%; background: linear-gradient(180deg, #2563eb, #4f46e5); border-radius: 3px; animation: waveBar 1s ease-in-out infinite; } .wave span:nth-child(1) { animation-delay: 0s; } .wave span:nth-child(2) { animation-delay: 0.1s; } .wave span:nth-child(3) { animation-delay: 0.2s; } .wave span:nth-child(4) { animation-delay: 0.3s; } .wave span:nth-child(5) { animation-delay: 0.4s; } @keyframes waveBar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.