12 CSS Ripple Effects 03 / 12

CSS Pond Ripple Background Animation

A multi-origin pond ripple hero with four separate drop-sources — each triggering 2–4 staggered ring keyframes at different radii and speeds — plus pulsing drop-center dots, a frosted-glass editorial card and drifting leaf particles, all pure CSS.

CSS + JS 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-03">
  <div class="rpl-03__fog"></div>

  <!-- Ripple groups -->
  <div class="rpl-03__ring rpl-03__ring--a1"></div>
  <div class="rpl-03__ring rpl-03__ring--a2"></div>
  <div class="rpl-03__ring rpl-03__ring--a3"></div>
  <div class="rpl-03__ring rpl-03__ring--a4"></div>
  <div class="rpl-03__ring rpl-03__ring--b1"></div>
  <div class="rpl-03__ring rpl-03__ring--b2"></div>
  <div class="rpl-03__ring rpl-03__ring--b3"></div>
  <div class="rpl-03__ring rpl-03__ring--c1"></div>
  <div class="rpl-03__ring rpl-03__ring--c2"></div>
  <div class="rpl-03__ring rpl-03__ring--d1"></div>
  <div class="rpl-03__ring rpl-03__ring--d2"></div>

  <!-- Drop-point centers -->
  <div class="rpl-03__drop rpl-03__drop--a"></div>
  <div class="rpl-03__drop rpl-03__drop--b"></div>
  <div class="rpl-03__drop rpl-03__drop--c"></div>
  <div class="rpl-03__drop rpl-03__drop--d"></div>

  <div class="rpl-03__card">
    <div class="eyebrow">Pure CSS Background</div>
    <h1>Still waters,<br><em>endless ripples.</em></h1>
    <p>A multi-origin pond ripple background built from layered CSS keyframes — no canvas, no JavaScript, just rings that breathe.</p>
    <a href="#" class="rpl-03__cta">Explore the Demo →</a>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

.rpl-03, .rpl-03 *, .rpl-03 *::before, .rpl-03 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-03 ::selection { background: #5eead4; color: #042f2e; }

.rpl-03 {
  font-family: 'DM Sans', sans-serif;
  background: linear-gradient(160deg, #042f2e 0%, #064e3b 35%, #065f46 60%, #022c22 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* ─── Animated pond ripple rings (pure CSS, no JS) ─── */
.rpl-03__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(94,234,212,0.5);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

/* Ripple group A — center-left */
.rpl-03__ring--a1 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out infinite; }
.rpl-03__ring--a2 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 0.8s infinite; border-color: rgba(94,234,212,0.3); }
.rpl-03__ring--a3 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 1.6s infinite; border-color: rgba(94,234,212,0.15); }
.rpl-03__ring--a4 { left: 28%; top: 55%; width: 400px; height: 400px; animation: rpl-03-expand 4s ease-out 2.4s infinite; border-color: rgba(94,234,212,0.07); }

/* Ripple group B — right */
.rpl-03__ring--b1 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 1.2s infinite; border-color: rgba(52,211,153,0.45); }
.rpl-03__ring--b2 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 2.2s infinite; border-color: rgba(52,211,153,0.25); }
.rpl-03__ring--b3 { left: 72%; top: 38%; width: 320px; height: 320px; animation: rpl-03-expand 5s ease-out 3.2s infinite; border-color: rgba(52,211,153,0.1); }

/* Ripple group C — top-right (small) */
.rpl-03__ring--c1 { left: 85%; top: 20%; width: 200px; height: 200px; animation: rpl-03-expand 3.2s ease-out 0.4s infinite; border-color: rgba(110,231,183,0.6); }
.rpl-03__ring--c2 { left: 85%; top: 20%; width: 200px; height: 200px; animation: rpl-03-expand 3.2s ease-out 1.1s infinite; border-color: rgba(110,231,183,0.3); }

/* Ripple group D — bottom-left (tiny) */
.rpl-03__ring--d1 { left: 12%; top: 78%; width: 160px; height: 160px; animation: rpl-03-expand 2.8s ease-out 1.8s infinite; border-color: rgba(167,243,208,0.55); }
.rpl-03__ring--d2 { left: 12%; top: 78%; width: 160px; height: 160px; animation: rpl-03-expand 2.8s ease-out 2.5s infinite; border-color: rgba(167,243,208,0.25); }

@keyframes rpl-03-expand {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  70%  { opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* Drop-point dots */
.rpl-03__drop {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a7f3d0, #5eead4);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(94,234,212,0.8);
  animation: rpl-03-drip 4s ease-in-out infinite;
}
.rpl-03__drop--a { left: 28%; top: 55%; }
.rpl-03__drop--b { left: 72%; top: 38%; animation-delay: 1.2s; animation-duration: 5s; }
.rpl-03__drop--c { left: 85%; top: 20%; animation-delay: 0.4s; animation-duration: 3.2s; width: 5px; height: 5px; }
.rpl-03__drop--d { left: 12%; top: 78%; animation-delay: 1.8s; animation-duration: 2.8s; width: 5px; height: 5px; }

@keyframes rpl-03-drip {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  40%       { transform: translate(-50%,-50%) scale(1.5); opacity: 0.6; }
  50%       { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
}

/* Soft gradient fog layers */
.rpl-03__fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 28% 55%, rgba(16,185,129,0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 72% 38%, rgba(52,211,153,0.10), transparent 70%),
    radial-gradient(ellipse 35% 30% at 85% 20%, rgba(110,231,183,0.08), transparent 70%);
  pointer-events: none;
}

/* Content card */
.rpl-03__card {
  position: relative;
  z-index: 10;
  background: rgba(4,47,46,0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(94,234,212,0.2);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 6vw, 64px);
  text-align: center;
  max-width: 560px;
  box-shadow: 0 0 0 1px rgba(94,234,212,0.05) inset, 0 40px 80px rgba(0,0,0,0.4);
}

.rpl-03__card .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #5eead4;
  margin-bottom: 16px;
}
.rpl-03__card h1 {
  font-family: 'DM Serif Display';
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1.0;
  color: #f0fdfb;
}
.rpl-03__card h1 em {
  color: #5eead4;
  font-style: italic;
}
.rpl-03__card p {
  margin-top: 16px;
  font-size: 1rem;
  color: rgba(209,250,229,0.65);
  line-height: 1.6;
  font-weight: 300;
}

.rpl-03__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 30px;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 8px 24px rgba(5,150,105,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.rpl-03__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset, 0 16px 40px rgba(5,150,105,0.5);
}

/* Floating leaf particles */
.rpl-03__leaf {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(52,211,153,0.5);
  pointer-events: none;
  animation: rpl-03-drift linear infinite;
}
@keyframes rpl-03-drift {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-80px) translateX(20px) scale(0.7); opacity: 0.3; }
  100% { transform: translateY(-160px) translateX(-10px) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rpl-03__ring, .rpl-03__drop, .rpl-03__leaf { animation: none !important; opacity: 0.2; }
  .rpl-03__cta { transition: none; }
}
// Spawn floating particles
(function() {
  const scene = document.querySelector('.rpl-03');
  for (let i = 0; i < 16; i++) {
    const el = document.createElement('div');
    el.className = 'rpl-03__leaf';
    const size = Math.random() * 5 + 3;
    el.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      top:${Math.random()*100}%;
      animation-duration:${Math.random()*8+6}s;
      animation-delay:${Math.random()*-8}s;
      opacity:${Math.random()*0.5+0.1};
    `;
    scene.appendChild(el);
  }
})();

More from 12 CSS Ripple Effects

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

Search CodeFronts

Loading…

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