12 CSS Ripple Effects 09 / 12

CSS Sound Wave Ripple Visualizer

An audio player UI with a central speaker icon surrounded by five CSS ripple waves at staggered delays, twelve animated EQ bars (alternating height keyframes), a looping dashed SVG sine-wave path with stroke-dashoffset scroll, and minimal player controls.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="rpl-09">
  <div class="rpl-09__header">
    <h1>Sound Wave Ripple Visualizer</h1>
    <p>CSS ripple rings, animated EQ bars and a looping SVG waveform</p>
  </div>

  <div class="rpl-09__speaker">
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__wave"></div>
    <div class="rpl-09__icon">🔊</div>
  </div>

  <div class="rpl-09__eq">
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
    <div class="rpl-09__bar"></div>
  </div>

  <div class="rpl-09__waveform">
    <svg viewBox="0 0 560 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#7c3aed"/>
          <stop offset="50%" stop-color="#e879f9"/>
          <stop offset="100%" stop-color="#7c3aed"/>
        </linearGradient>
      </defs>
      <path class="rpl-09__wave-path"
        stroke-dasharray="8 4"
        d="M0,50 C20,10 40,90 60,50 C80,10 100,90 120,50 C140,10 160,90 180,50 C200,10 220,90 240,50 C260,10 280,90 300,50 C320,10 340,90 360,50 C380,10 400,90 420,50 C440,10 460,90 480,50 C500,10 520,90 540,50 C555,22 560,40 560,50"/>
    </svg>
  </div>

  <div class="rpl-09__track">
    <div class="title">Midnight Frequencies</div>
    <div class="artist">The Static Assembly — Transmit EP</div>
  </div>

  <div class="rpl-09__controls">
    <div class="rpl-09__ctrl">⏮</div>
    <div class="rpl-09__ctrl rpl-09__ctrl--play">▶</div>
    <div class="rpl-09__ctrl">⏭</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Outfit:wght@300;600;700&display=swap');

.rpl-09, .rpl-09 *, .rpl-09 *::before, .rpl-09 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-09 ::selection { background: #e879f9; color: #0f0021; }

.rpl-09 {
  font-family: 'Outfit', sans-serif;
  background: #0a0015;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
  color: #f5e8ff;
  overflow: hidden;
  position: relative;
}

/* Grid bg */
.rpl-09::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,121,249,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,121,249,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.rpl-09__header {
  text-align: center;
  z-index: 2;
}
.rpl-09__header h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  background: linear-gradient(135deg, #e879f9, #c026d3, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.rpl-09__header p {
  margin-top: 8px;
  color: rgba(245,232,255,0.4);
  font-weight: 300;
  font-size: 0.9rem;
}

/* ─── Central speaker ripple ─── */
.rpl-09__speaker {
  position: relative;
  width: 160px; height: 160px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.rpl-09__wave {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(232,121,249,0.7);
  animation: rpl-09-wave 2s ease-out infinite;
}
.rpl-09__wave:nth-child(1) { inset: 0; animation-delay: 0s; }
.rpl-09__wave:nth-child(2) { inset: 0; animation-delay: 0.4s; border-color: rgba(192,38,211,0.55); }
.rpl-09__wave:nth-child(3) { inset: 0; animation-delay: 0.8s; border-color: rgba(124,58,237,0.4); }
.rpl-09__wave:nth-child(4) { inset: 0; animation-delay: 1.2s; border-color: rgba(109,40,217,0.25); }
.rpl-09__wave:nth-child(5) { inset: 0; animation-delay: 1.6s; border-color: rgba(91,33,182,0.12); }
@keyframes rpl-09-wave {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.rpl-09__icon {
  position: relative;
  z-index: 3;
  font-size: 48px;
  filter: drop-shadow(0 0 16px rgba(232,121,249,0.7));
  animation: rpl-09-throb 2s ease-in-out infinite;
}
@keyframes rpl-09-throb {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

/* ─── EQ Bars ─── */
.rpl-09__eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 80px;
  z-index: 2;
}
.rpl-09__bar {
  width: 14px;
  border-radius: 3px 3px 0 0;
  animation: rpl-09-bar ease-in-out infinite alternate;
  background: linear-gradient(0deg, #7c3aed, #c026d3, #e879f9);
  box-shadow: 0 0 8px rgba(232,121,249,0.4);
  min-height: 4px;
}
.rpl-09__bar:nth-child(1)  { height: 35%; animation-duration: 0.7s; animation-delay: 0s; }
.rpl-09__bar:nth-child(2)  { height: 70%; animation-duration: 0.5s; animation-delay: 0.1s; }
.rpl-09__bar:nth-child(3)  { height: 55%; animation-duration: 0.9s; animation-delay: 0.05s; }
.rpl-09__bar:nth-child(4)  { height: 90%; animation-duration: 0.4s; animation-delay: 0.2s; }
.rpl-09__bar:nth-child(5)  { height: 45%; animation-duration: 0.6s; animation-delay: 0.15s; }
.rpl-09__bar:nth-child(6)  { height: 100%; animation-duration: 0.35s; animation-delay: 0s; }
.rpl-09__bar:nth-child(7)  { height: 75%; animation-duration: 0.55s; animation-delay: 0.08s; }
.rpl-09__bar:nth-child(8)  { height: 60%; animation-duration: 0.8s; animation-delay: 0.12s; }
.rpl-09__bar:nth-child(9)  { height: 85%; animation-duration: 0.45s; animation-delay: 0.18s; }
.rpl-09__bar:nth-child(10) { height: 50%; animation-duration: 0.65s; animation-delay: 0.06s; }
.rpl-09__bar:nth-child(11) { height: 30%; animation-duration: 0.75s; animation-delay: 0.22s; }
.rpl-09__bar:nth-child(12) { height: 65%; animation-duration: 0.5s; animation-delay: 0.3s; }
@keyframes rpl-09-bar { to { height: 8%; opacity: 0.3; } }

/* ─── Waveform line ─── */
.rpl-09__waveform {
  width: min(560px, 100%);
  height: 100px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.rpl-09__waveform svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rpl-09__wave-path {
  fill: none;
  stroke: url(#waveGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(232,121,249,0.5));
  animation: rpl-09-shift 2s linear infinite;
}
@keyframes rpl-09-shift {
  to { stroke-dashoffset: -120; }
}

/* Track info */
.rpl-09__track {
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rpl-09__track .title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rpl-09__track .artist {
  font-size: 0.82rem;
  color: rgba(245,232,255,0.45);
  font-weight: 300;
}

/* Controls */
.rpl-09__controls {
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 2;
}
.rpl-09__ctrl {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(232,121,249,0.1);
  border: 1px solid rgba(232,121,249,0.25);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  color: #e879f9;
}
.rpl-09__ctrl:hover { background: rgba(232,121,249,0.2); transform: scale(1.08); }
.rpl-09__ctrl--play {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  border-color: transparent;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 0 24px rgba(192,38,211,0.5);
}
.rpl-09__ctrl--play:hover { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  .rpl-09__wave, .rpl-09__icon, .rpl-09__bar, .rpl-09__wave-path { animation: none !important; }
  .rpl-09__bar { height: 50% !important; }
}

More from 12 CSS Ripple Effects

CSS Ripple Loading SpinnerCSS Sonar Ping Ripple AnimationCSS Ripple Card Hover EffectCSS Liquid Drop Ripple AnimationCSS Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background AnimationCSS Heartbeat Pulse Ripple EffectCSS Ripple Login Form UICSS Aurora Borealis Ripple BackgroundCSS Neon Glow Ripple Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →