Glass Ripple Touch
A 260 × 170 px frosted glass surface: every press drops three rings that start from the exact point of the finger or click, 0.15 s apart, and widen from 60 to 180 px while fading in 1 s — several fingers at once make several ripples.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
The .lg-ripple-surface surface is a pane of glass: 6% white fill, backdrop-filter: blur(10px) (with its -webkit- form), 12% white border, 16 px corners, overflow: hidden so the ripples do not spill out, and a 10% indigo → pink veil as ::before. The “Click anywhere” label (12 px, 50% white) is centered and lets presses through (pointer-events: none).
The script listens to pointerdown on every [data-ripple-surface]. On each press, it creates three 60 × 60 px div.lg-ripple-rings centered on the touched point (relative to the surface), with 0, 0.15 and 0.3 s delays, and removes them 1.2 s later. The lgRippleExpand animation (1 s, ease-out, forwards) takes them from scale(0) to scale(3) — 180 px across — while opacity falls to 0 and the 2 px border goes from 60% purple to transparent. Measured 550 ms after the press in Chromium 151: scales 2.25 / 1.77 / 1.19 and opacities 0.25 / 0.41 / 0.60 (2.23 / 1.74 / 1.17 in Firefox 153); at 1,350 ms, no ring left in the page.
Two choices make the glass readable and the ripple reliable. The surface sits in a .lg-ripple-backdrop setting — three sharp-edged discs (indigo, pink, cyan), fine hatching and a night background — that runs under its edges: you see the discs sharp around it, blurred behind it. Over a flat color, a 10 px blur would have nothing to blur and the glass would come down to a gray rectangle; replace that setting with your own picture. And the listener is pointerdown, not click: measured in Chromium with touch, two fingers put down together produce no click, hence no ripple, whereas with pointerdown each finger gets its own (2 presses, 6 rings), and the ripple starts on contact instead of waiting for the finger to lift.
Accessibility
- Visual feedback, not a control: the surface is a
div, with no role and no keyboard focus (measured: Tab does not stop on it). The ripple says “I felt your finger”; if the press triggers an action (picking a zone, starting a game), that action must also exist on a real<button>or link placed in the surface — the ripple comes on top. - Motion: the ripple only happens on press, but no
prefers-reduced-motionrule is provided. Add@media (prefers-reduced-motion: reduce) { .lg-ripple-ring { animation-duration: .4s; animation-delay: 0s !important } }for a single short ripple, ordisplay: nonefor none. - Contrast: the purple rings going from 60% to 0% are decoration; on a turquoise or light background they almost vanish (see the scenes, switched to white). The 50% white label measures 5.2:1 on the surface over a dark background; on your picture, check it.
- Accidental presses: with
pointerdown, starting a finger scroll on the surface also triggers a ripple. Harmless as long as the ripple stays visual feedback; if the surface triggers an action, fire it on release (clickon the button), not on press.
Browser compatibility
JS: pointerdown, getBoundingClientRect, createElement, setTimeout. CSS: transform + opacity animation, backdrop-filter (and -webkit-), overflow: hidden. Zero dependencies. Measured in Chromium 151 and Firefox 153 (mouse): three rings, same scales within 2%, removed at 1.2 s, no error; in Chromium with emulated touch: a triple ring per finger, two simultaneous fingers included.
Without backdrop-filter (Firefox before 103), the surface stays translucent with no blur; the ripples work. Without pointer events (Safari before 13), no ripple appears: replace pointerdown with click if you must cover those versions.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="lg-ripple-backdrop">
<div class="lg-ripple-surface" data-ripple-surface="">
<span class="lg-ripple-label">…</span>
<!-- div.lg-ripple-ring × 3 per press, added then removed by the script -->
</div>
</div>
</div>The full HTML + CSS + JS of Glass Ripple Touch, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Ripple color (CSS — @keyframes lgRippleExpand, border-color) |
purple rgba(139,92,246,.6) → transparent |
The color lives in the animation, not in .lg-ripple-ring: a border-color rule on the ring changes nothing. Edit both steps of the @keyframes — white rgba(255,255,255,.95) → .2 on a colored background or water. |
Size and reach (JS — o.style.width = "60px"; CSS — scale(3)) |
60 px at the start, 180 px at the end | The starting size is written by the script (with the − 30 offset to center it); the reach is the final scale. scale(5) crosses a large surface; for children's fingers, 80 px at the start. |
Number and rhythm of rings (JS — c < 3, .15 * c; removal at 1200 ms) |
3 rings, 0.15 s apart, removed at 1.2 s | 2 rings 0.25 s apart give a slower ripple, 4 at 0.1 s a vibration. Keep the removal longer than duration + last delay (1 s + 0.3 s): at 1.2 s, the third ring is removed just before it finishes fading, invisibly. |
Glass blur and tint (CSS — .lg-ripple-surface, ::before) |
10 px blur, 6% white, 10% indigo → pink veil | 1-2 px when the background must stay readable (a map, a plan), 10-16 px for a plain material. The ::before veil tints the glass: switch it to your colors or remove it. |
Setting behind the glass (CSS — .lg-ripple-backdrop) |
three sharp discs, hatching, night background, 28 × 36 px margin around the surface | It is there so the blur shows in the demo. On your page, delete the div and its rule, and set the surface over your own picture or content. |
Triggering event (JS — "pointerdown") |
on press, one finger = one ripple | "click" waits for release and ignores multi-finger presses (measured: 0 ripples); only useful to cover Safari before 13. |
FAQ
@keyframes lgRippleExpand (a border-color rule on .lg-ripple-ring is overridden by the animation). And if the surface is on a flat background, the glass itself does not show: keep the provided setting or put the surface over a picture.pointerdown, which the browser sends for every finger. Measured in Chromium with touch: two fingers put down together, two triple ripples. A click listener would produce nothing in that case — the browser does not send a click for a multi-finger press. On a kiosk or touch table, also check that the operating system does not turn two fingers into a zoom gesture: touch-action: none on the surface prevents it.
