Pure CSS audio visualizer
A visually engaging, interactive audio visualizer built with only HTML and CSS, featuring animated bars triggered by a custom toggle button.
Overview
This component simulates a classic "audio bar" visualizer animation. Users can toggle between "play" and "pause" states with a stylish button. All bar movements and effects are powered by CSS keyframes and gradients—no JavaScript required.
Structure
HTML
- Container: .audio-visualizer is the main wrapper.
- Toggle: An invisible checkbox (#playToggle) and an associated label (.toggle-btn) allow users to control the play/pause state. The label acts as the visible button.
- Visualizer Bars: .bars contains seven .bar elements, each styled with a unique gradient.
<div class="audio-visualizer"> <input type="checkbox" id="playToggle" hidden> <label for="playToggle" class="toggle-btn">▶️ Play / ⏸ Pause</label> <div class="bars"> <div class="bar bar1"></div> <div class="bar bar2"></div> <div class="bar bar3"></div> <div class="bar bar4"></div> <div class="bar bar5"></div> <div class="bar bar6"></div> <div class="bar bar7"></div> </div> </div> Toggle Button
- Styled Label: Large, pill-shaped button using a linear gradient background.
- Interactive Feedback: On hover, the gradient changes for a dynamic effect.
- UX: Displays "Play" and "Pause" icons and text for accessibility .
Bars Visualization
- Layout: Flexbox arranges bars horizontally, with spacing and vertical bottom alignment.
- Gradients: Each bar uses a different vertical gradient for a vibrant, multi-color effect.
- Bar Size: All bars start at 20px height by default.
body { background:black; } .audio-visualizer { width: 320px; margin: 3rem auto; font-family: system-ui, sans-serif; text-align: center; } .toggle-btn { cursor: pointer; background: #3F5EFB; background: linear-gradient(179deg,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%); color: white; padding: 0.6rem 1.2rem; border-radius: 25px; font-weight: 600; user-select: none; margin-bottom: 1.5rem; display: inline-block; transition: background 0.3s; } .toggle-btn:hover { background: #833AB4; background: linear-gradient(180deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); } .bars { display: flex; gap: 8px; justify-content: center; align-items: flex-end; height: 160px; } .bar { width: 18px; border-radius: 3px; animation: breath 2.5s ease-in-out infinite; animation-play-state: paused; height: 20px; filter: none; transition: filter 0.3s ease; } /* Each bar's unique gradient color */ .bar1 { background: linear-gradient(180deg, #e63946, #a1202b); animation-duration: 1.7s; } .bar2 { background: linear-gradient(180deg, #f4a261, #a86d2b); animation-duration: 2.0s; } .bar3 { background: linear-gradient(180deg, #2a9d8f, #1d675d); animation-duration: 1.3s; } .bar4 { background: linear-gradient(180deg, #e76f51, #a0422a); animation-duration: 1.6s; } .bar5 { background: linear-gradient(180deg, #264653, #152733); animation-duration: 1.9s; } .bar6 { background: linear-gradient(180deg, #ffb703, #c78f00); animation-duration: 2.2s; } .bar7 { background: linear-gradient(180deg, #8ecae6, #5a8fbf); animation-duration: 1.5s; } /* Breath animation for pause */ @keyframes breath { 0%, 100% { height: 20px; filter: none; } 50% { height: 30px; filter: none; } } /* Play state bars animation */ @keyframes audioWave { 0%, 100% { height: 20px; filter: none; } 25% { height: 100px; filter: blur(2px); } 50% { height: 60px; filter: blur(1.5px); } 75% { height: 110px; filter: blur(2.5px); } } /* When playToggle is checked, start audio wave animation */ #playToggle:checked ~ .bars .bar { animation-name: audioWave; animation-play-state: running; } /* Stagger the animation delays for wave effect */ #playToggle:checked ~ .bars .bar1 { animation-delay: 0s; } #playToggle:checked ~ .bars .bar2 { animation-delay: 0.15s; } #playToggle:checked ~ .bars .bar3 { animation-delay: 0.3s; } #playToggle:checked ~ .bars .bar4 { animation-delay: 0.45s; } #playToggle:checked ~ .bars .bar5 { animation-delay: 0.6s; } #playToggle:checked ~ .bars .bar6 { animation-delay: 0.75s; } #playToggle:checked ~ .bars .bar7 { animation-delay: 0.9s; } 
Top comments (2)
Very nice
Some comments may only be visible to logged-in visitors. Sign in to view all comments.