12 CSS Ripple Effects

A ripple effect is a circular animation where one or more concentric rings expand outward from a point while fading in opacity. The pattern was canonised by Google's Material Design in 2014 as the standard "I pressed something" tactile feedback for buttons — it answers the visitor's subconscious question "did my tap register?" within 100ms. Since 2018 the pattern has expanded far beyond buttons: live status indicators use a continuous sonar ping (Discord, Slack), recording indicators use heartbeat pulses (Loom, OBS), water-surface scenes use click-driven multi-ring ripples (landing pages, portfolios), and sound visualisers use synchronised pulse rings (Spotify Now Playing, podcast players). All 12 demos in this collection are GPU-accelerated using <code>transform</code> and <code>opacity</code> only — no <code>width</code>/<code>height</code>/<code>top</code>/<code>left</code> animations that would trigger expensive layout recalculation.

Demo 02 (CSS Ripple Button Click Animation) ships the production-grade vanilla pattern. Cost comparison: <strong>Material UI (MUI)</strong> ships the ripple as part of its ~95kb gzipped component bundle. <strong>Material Components Web (MDC)</strong> ships an 18kb ripple-only module. <strong>This demo's approach</strong>: ~20 lines of vanilla JavaScript + ~30 lines of CSS, totalling ~1.2kb gzipped, no library dependencies, no React/Vue/Angular tie-in. The pattern: on <code>click</code>, calculate the cursor's coordinates relative to the button via <code>getBoundingClientRect()</code>, spawn an absolutely-positioned <code>&lt;span class="ripple"&gt;</code> at those coordinates with width and height set to the button's diagonal length, then trigger a CSS <code>@keyframes</code> that scales it from <code>scale(0)</code> to <code>scale(2)</code> while fading <code>opacity</code> from 0.4 to 0. The span removes itself via <code>animationend</code>. Works in every framework (React, Vue, Svelte, Astro) or no framework — the markup and CSS are framework-neutral; only the click handler needs framework idioms.

Demo 01 (CSS Water Ripple Click Effect) ships the multi-ring concentric ripple pattern at the exact cursor coordinate. Most online "water ripple" tutorials animate a single expanding ring at a fixed position — this demo spawns 4 concentric rings at the precise cursor location with staggered animation delays so they appear to radiate outward at different speeds (mimicking how real water surface waves propagate). The implementation: on <code>click</code>, capture <code>event.offsetX</code> and <code>event.offsetY</code>, spawn 4 absolutely-positioned <code>&lt;div&gt;</code> rings via <code>createElement</code> with <code>animationDelay: 0ms, 100ms, 200ms, 300ms</code>, each with a CSS <code>box-shadow</code> glow that scales and fades. A separate radial-gradient overlay creates the caustic-shimmer surface, and a CSS <code>@keyframes</code> animates floating bubble particles in the background. Total: ~40 lines of JS, 0 framework dependencies. Production-grade detail: the rings clean up via <code>animationend</code> listener so the DOM doesn't accumulate dead nodes after thousands of clicks.

Yes. Demo 05 (CSS Ripple Loading Spinner) is 100% pure CSS — zero JavaScript. The pattern: two absolutely-positioned <code>&lt;div&gt;</code> elements both running the same <code>@keyframes ripple</code> animation that scales from <code>scale(0)</code> to <code>scale(1)</code> while expanding the <code>border-width</code> and fading <code>opacity</code> from 1 to 0. The second div has <code>animation-delay: 1s</code> so the rings stagger and the visitor always sees one ring at any phase of the animation. Total: ~15 lines of CSS, no markup beyond the two divs, no library. Compare to JavaScript-driven ripple loaders (jQuery's <code>.animate()</code>, GSAP's timeline, React Spring) which all add framework bundle overhead — this approach is ~250 bytes and works in every browser back to 2017. The <code>@media (prefers-reduced-motion: reduce)</code> block freezes the animation for visitors with the OS preference set, replacing it with a static circular border so the visual signal "something is loading" still communicates.

Demo 06 (CSS Sonar Ping Ripple Animation) ships the canonical live-status pattern used by Discord (online dots), Slack (presence indicators), Loom and OBS (recording badges), and Google Meet (active speaker rings). The pattern: a small solid coloured dot in the centre with one or more absolutely-positioned <code>::before</code> / <code>::after</code> pseudo-elements running a continuous <code>@keyframes ping</code> that scales from <code>scale(1)</code> to <code>scale(2.5)</code> while fading <code>opacity</code> from 0.7 to 0 over 1.5 seconds, then repeats. The infinite repeat creates the "sonar pulse" rhythm. Three production-grade details: (1) <strong>Use <code>animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite</code></strong> — the ease-out curve mimics real sonar waves decelerating as they spread. (2) <strong>Set <code>animation-delay</code> to negative values on multiple pulse rings</strong> so the pulse phase is offset and visitors see continuous coverage. (3) <strong>Honour <code>prefers-reduced-motion</code></strong> — vestibular-disorder-affected visitors can experience nausea from infinite pulse animations; replace with a solid border when the OS preference is set. ~25 lines of CSS, no JavaScript.

Demo 07 (CSS Heartbeat Pulse Ripple Effect) ships the medical / fitness rhythm pattern that fitness wearables (Apple Watch, Whoop, Oura) and telehealth dashboards (Teladoc, Amwell, Practo) use. Unlike the steady sonar ping rhythm (continuous 1.5s pulse), heartbeat uses a syncopated "thump-thump" pattern that mimics a real cardiac cycle — a fast double-beat with a longer rest between cycles. Implementation: a single <code>@keyframes heartbeat</code> with timing markers at 0%, 14%, 28%, 42%, 70%, 100% that scale the element up at 14% (S1 beat), down at 28%, up again at 42% (S2 beat), then rest from 70% to 100%. The result reads as cardiac rhythm to the visitor's brain. Most online tutorials skip the syncopation and ship a steady pulse, which reads as "sonar" not "heartbeat". Bonus: pairs the rhythm animation with vanilla JS-spawned floating heart particles (~30 lines) for the brand-flagship medical-dashboard look. Production gotcha: the SVG / SMIL approach most older tutorials teach is deprecated — use CSS keyframes instead.

Demo 09 (CSS Sound Wave Ripple Visualizer) ships an audio-visualiser-style ripple pattern that does NOT require microphone access or the Web Audio API. Most "CSS sound wave" tutorials teach the real visualiser approach: <code>navigator.mediaDevices.getUserMedia()</code> + <code>AudioContext</code> + <code>AnalyserNode</code> + <code>requestAnimationFrame</code> reading <code>getByteFrequencyData()</code> — that's ~80 lines of JavaScript, requires HTTPS, requires microphone permission (which scares visitors away), and only works on real audio input. <strong>This demo's approach</strong>: 16 horizontal bars with staggered <code>animation-delay</code> values running a <code>@keyframes height</code> that pulses each bar's <code>scaleY</code> independently. The result reads as a sound-reactive visualiser to the visitor's brain even though no real audio is being analysed. Perfect for: podcast landing pages, music app marketing, voice-assistant marketing pages — anywhere you want the "audio is happening" vibe without the technical complexity. ~30 lines of CSS, 0 JavaScript, 0 permissions, 0 HTTPS requirement. Pairs with a real Web Audio implementation later if needed (replace the staggered keyframes with real <code>getByteFrequencyData()</code> values).

Not if you follow two rules — both of which all 12 demos in this collection follow. <strong>Rule 1: animate <code>transform</code> and <code>opacity</code> only.</strong> These two properties are GPU-accelerated and run on the compositor thread — they don't trigger layout recalculation or repainting of other elements. Animating <code>width</code>, <code>height</code>, <code>top</code>, <code>left</code>, <code>margin</code>, or <code>padding</code> instead forces "layout thrashing" — every animation frame the browser must recalculate every element's position, costing 4-16ms per frame and tanking INP (Interaction to Next Paint) score, the Core Web Vital that replaced FID in March 2024. <strong>Rule 2: add <code>will-change: transform, opacity</code> on the ripple element</strong> so the browser promotes it to its own GPU layer before the animation starts — preventing the first-frame stutter you'd otherwise see. Trade-off: <code>will-change</code> uses ~100-300kb of GPU memory per layer, so add it only to the ripple element, not the whole page. Result: every demo in this collection runs at 60fps on a mid-tier 2022 Android phone (Pixel 5 / Galaxy A52 baseline). Lighthouse mobile-profile scores: 95+ Performance on all 12 demos.

Two accessibility considerations matter for ripple effects, and all 12 demos in this collection handle both. <strong>Consideration 1: WCAG 2.3.3 Animation from Interactions.</strong> Visitors with vestibular disorders (motion sickness, inner ear conditions, migraine triggers) can experience nausea or disorientation from continuous expanding-circle animations. The mitigation: every demo includes an <code>@media (prefers-reduced-motion: reduce)</code> block that disables continuous animations (sonar ping, heartbeat pulse, aurora ripple, sound wave) entirely, replacing them with static styling that still communicates the underlying signal (e.g. the sonar ping becomes a static solid border indicating "live"; the loading spinner becomes a static circular indicator with text "Loading..."). Click-triggered ripples (water ripple, Material button) keep the animation since they're user-initiated single events rather than continuous loops. <strong>Consideration 2: focus indicators.</strong> Visitors using keyboard navigation need a visible focus state. Every interactive element (Demo 02 buttons, Demo 11 login form fields) has a <code>:focus-visible</code> ring distinct from the click ripple, so keyboard users get clear feedback without depending on the click-driven ripple animation.

Quick decision guide. <strong>Button feedback on click (any app)</strong>: Demo 02 (CSS Ripple Button Click Animation) — the vanilla Material Design implementation, drop into any button. <strong>Landing page hero with interactive surface</strong>: Demo 01 (Water Ripple Click Effect) — clickable ocean pond, premium feel. <strong>Animated page background</strong>: Demo 03 (Pond Ripple Background) for subtle, Demo 12 (Aurora Borealis Ripple) for premium / Northern-Lights brand. <strong>Live status indicators (online dots, presence, recording)</strong>: Demo 06 (Sonar Ping) — the Discord / Slack pattern. <strong>Medical, fitness, or telehealth dashboards</strong>: Demo 07 (Heartbeat Pulse) — syncopated cardiac rhythm. <strong>Loading state</strong>: Demo 05 (Ripple Loading Spinner) — minimal, pure CSS. <strong>Card hover interactions for product grids or portfolios</strong>: Demo 08 (Ripple Card Hover) — subtle radial expansion on hover. <strong>Music, podcast, or voice-assistant marketing pages</strong>: Demo 09 (Sound Wave Visualizer) — fake-but-convincing audio reactivity without Web Audio API. <strong>Landing page CTA with droplet effect</strong>: Demo 10 (Liquid Drop) — water-drop falling animation. <strong>Login or signup forms</strong>: Demo 11 (Ripple Login Form UI) — form-field ripple feedback on focus + click. <strong>Neon / cyberpunk / gaming brand</strong>: Demo 04 (Neon Glow Ripple) — vibrant edge-lit ripples. All 12 demos are GPU-accelerated, respect prefers-reduced-motion, use scoped <code>.rpl-NN__*</code> class names so multiple can coexist on the same page, and are MIT-licensed.