12 CSS Ripple Effects 10 / 12

CSS Liquid Drop Ripple Animation

Three liquid-drop simulations with physically accurate CSS morphing — each drop shape-shifts border-radius from oval to sphere on fall then squishes on impact — followed by elliptical concentric ripple rings (width and height animated separately for perspective foreshortening).

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-10">
  <div class="rpl-10__header">
    <h1>Liquid Drop<br>Ripple Animation</h1>
    <p>CSS-only falling drops with elliptical surface ripple rings</p>
  </div>

  <div class="rpl-10__stage">
    <!-- Amber drop -->
    <div class="rpl-10__drop-group rpl-10__group--a">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Amber</div>
    </div>

    <!-- Indigo drop -->
    <div class="rpl-10__drop-group rpl-10__group--b">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Indigo</div>
    </div>

    <!-- Rose drop -->
    <div class="rpl-10__drop-group rpl-10__group--c">
      <div class="rpl-10__surface">
        <div class="rpl-10__falling-drop"></div>
        <div class="rpl-10__ripple-set">
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
          <div class="rpl-10__r"></div>
        </div>
        <div class="rpl-10__line"></div>
      </div>
      <div class="rpl-10__label">Rose</div>
    </div>
  </div>

  <div class="rpl-10__info">
    <p>Each drop uses a <strong>border-radius morph</strong> on fall, then elliptical <strong>scale + fade rings</strong> on impact — the perspective foreshortening is achieved by animating height and width separately. Pure CSS, no JavaScript.</p>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap');

.rpl-10, .rpl-10 *, .rpl-10 *::before, .rpl-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rpl-10 ::selection { background: #fb923c; color: #fff; }

.rpl-10 {
  font-family: 'Lato', sans-serif;
  background: linear-gradient(160deg, #fff8f0 0%, #fef3e2 50%, #fff8f0 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 24px;
  color: #2c1a08;
}

.rpl-10__header {
  text-align: center;
}
.rpl-10__header h1 {
  font-family: 'Playfair Display';
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  color: #2c1a08;
  line-height: 1.1;
}
.rpl-10__header p {
  margin-top: 12px;
  color: rgba(44,26,8,0.5);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ─── Drop showcase ─── */
.rpl-10__stage {
  display: flex;
  gap: 56px;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
}

.rpl-10__drop-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* The "liquid surface" */
.rpl-10__surface {
  width: 180px;
  position: relative;
}

/* The drop falling */
.rpl-10__falling-drop {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.8), currentColor 60%);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.1);
  animation: rpl-10-fall linear infinite;
}

/* Ripple circles on surface */
.rpl-10__ripple-set {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rpl-10__r {
  position: absolute;
  border-radius: 50%;
  animation: rpl-10-ring ease-out infinite;
}

@keyframes rpl-10-fall {
  0%   { top: -50px; height: 12px; width: 10px; opacity: 0; }
  40%  { opacity: 1; }
  80%  { top: -8px; height: 14px; width: 10px; opacity: 1; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }
  85%  { top: -4px; height: 8px; width: 16px; opacity: 1; border-radius: 50%; }
  90%  { top: 0; height: 4px; width: 20px; opacity: 0.7; }
  100% { top: 0; height: 0; width: 22px; opacity: 0; }
}

@keyframes rpl-10-ring {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { opacity: 0; }
}

/* DROP A — amber */
.rpl-10__group--a .rpl-10__falling-drop {
  color: #f59e0b;
  width: 12px;
  animation-duration: 2.2s;
  animation-delay: 0s;
}
.rpl-10__group--a .rpl-10__r {
  border: 1.5px solid rgba(245,158,11,0.7);
  animation-duration: 2s;
}
.rpl-10__group--a .rpl-10__r:nth-child(1) { animation-delay: 0.5s; }
.rpl-10__group--a .rpl-10__r:nth-child(2) { animation-delay: 0.8s; border-color: rgba(245,158,11,0.45); }
.rpl-10__group--a .rpl-10__r:nth-child(3) { animation-delay: 1.1s; border-color: rgba(245,158,11,0.2); }
.rpl-10__group--a .rpl-10__label { color: #d97706; }
.rpl-10__group--a .rpl-10__r:nth-child(1) { animation-timing-function: ease-out; }
.rpl-10__group--a .rpl-10__r { --max: 100px; }
@keyframes rpl-10-ring-a {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 100px; height: 40px; opacity: 0; }
}
.rpl-10__group--a .rpl-10__r { animation-name: rpl-10-ring-a; }

/* DROP B — indigo */
.rpl-10__group--b .rpl-10__falling-drop {
  color: #6366f1;
  width: 14px;
  animation-duration: 2.8s;
  animation-delay: 0.6s;
}
.rpl-10__group--b .rpl-10__r {
  border: 1.5px solid rgba(99,102,241,0.7);
}
.rpl-10__group--b .rpl-10__r:nth-child(1) { animation-delay: 1.2s; animation-duration: 2.4s; }
.rpl-10__group--b .rpl-10__r:nth-child(2) { animation-delay: 1.6s; animation-duration: 2.4s; border-color: rgba(99,102,241,0.4); }
.rpl-10__group--b .rpl-10__r:nth-child(3) { animation-delay: 2.0s; animation-duration: 2.4s; border-color: rgba(99,102,241,0.18); }
@keyframes rpl-10-ring-b {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 120px; height: 50px; opacity: 0; }
}
.rpl-10__group--b .rpl-10__r { animation-name: rpl-10-ring-b; }
.rpl-10__group--b .rpl-10__label { color: #4f46e5; }

/* DROP C — rose */
.rpl-10__group--c .rpl-10__falling-drop {
  color: #ec4899;
  width: 10px;
  animation-duration: 1.8s;
  animation-delay: 1.1s;
}
.rpl-10__group--c .rpl-10__r {
  border: 1.5px solid rgba(236,72,153,0.7);
}
.rpl-10__group--c .rpl-10__r:nth-child(1) { animation-delay: 1.6s; animation-duration: 1.6s; }
.rpl-10__group--c .rpl-10__r:nth-child(2) { animation-delay: 1.9s; animation-duration: 1.6s; border-color: rgba(236,72,153,0.4); }
.rpl-10__group--c .rpl-10__r:nth-child(3) { animation-delay: 2.2s; animation-duration: 1.6s; border-color: rgba(236,72,153,0.18); }
@keyframes rpl-10-ring-c {
  0%   { width: 0; height: 0; opacity: 0.9; }
  100% { width: 80px; height: 32px; opacity: 0; }
}
.rpl-10__group--c .rpl-10__r { animation-name: rpl-10-ring-c; }
.rpl-10__group--c .rpl-10__label { color: #db2777; }

/* Surface line */
.rpl-10__line {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.3;
}
.rpl-10__group--a .rpl-10__line { color: #f59e0b; }
.rpl-10__group--b .rpl-10__line { color: #6366f1; }
.rpl-10__group--c .rpl-10__line { color: #ec4899; }

.rpl-10__label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Info text */
.rpl-10__info {
  max-width: 520px;
  text-align: center;
}
.rpl-10__info p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(44,26,8,0.5);
  font-weight: 300;
}
.rpl-10__info strong {
  color: #2c1a08;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .rpl-10__falling-drop, .rpl-10__r { animation: none !important; opacity: 0.3; }
}

More from 12 CSS Ripple Effects

CSS Heartbeat Pulse Ripple EffectCSS 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 Water Ripple Click EffectCSS Ripple Button Click AnimationCSS Pond Ripple Background Animation
View the full collection →

Search CodeFronts

Loading…

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