Backgrounds✨ Premium
Rain on Glass
Rain on a window, actually simulated: every drop acts as a convex lens and shows the background flipped and magnified, slides in fits according to stick-slip physics, merges with its neighbours, and leaves behind a wet ribbon that distorts the backdrop before evaporating.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
🎈
🎊
✨
How it works
An urban night backdrop — a sky-to-ground gradient plus a dozen or so blurred light blooms — is painted once onto an offscreen canvas. Everything else builds on it: that is what makes the refraction credible without costing much, since the backdrop is never redrawn.
Each drop is a circular clip in which that backdrop is redrawn, zoomed and then flipped horizontally by a
translate followed by scale(-1, 1). That is the optical behaviour of a convex lens, and this detail — the inverted image — is what separates a real drop from a plain blurred circle. A radial highlight top-left, a white rim along the upper edge and a crescent shadow below complete it.
The descent follows a stick-slip model: a drop clings until it passes a slightly randomised mass threshold, then runs, may re-anchor, and deposits micro-droplets in its wake. Its path is drawn in white onto a wetness map, later used as a mask to compose the shifted, stretched backdrop: the glass stays wet where water has passed, then slowly dries.Accessibility
- Under
prefers-reduced-motion: reducethe effect does not switch off: it shows a frozen constellation of refracting drops. The visitor keeps the wet-window image, with no motion at all. - An opaque mode covers
prefers-reduced-transparencyand high-contrast settings: drops stop being translucent and are painted flat, which removes the stack of semi-transparent layers. - The canvas is marked
aria-hidden="true"; the container carriesrole="img"and a label describing the scene. No useful content is locked inside the render. - The backdrop is dark and contrasty by nature (bright points on night). If you place text over it, keep it away from the brightest bokeh blooms, or lay a dark scrim between: the light areas are scattered, and testing contrast at a single point is not enough.
Browser compatibility
Canvas 2D only: clip, drawImage, transforms, radial gradients and mask compositing. devicePixelRatio is capped at 2 to avoid painting four times too many pixels on very dense screens. Plus requestAnimationFrame and matchMedia. No library.
Chrome 60+✓ Full
Edge 79+✓ Full
Firefox 55+✓ Full
Safari 11+✓ Full
Safari iOS 11+✓ Full — lower
MAXD on older modelsChrome Android 60+✓ Full
Without JavaScript the canvas stays empty: give .rog-scene a night colour or gradient in CSS so the section keeps its presence. The effect then degrades to a plain dark background, which still reads correctly.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
index.html — structure
<div class="rog-scene" id="rogScene"
role="img"
aria-label="Rain on glass — refracting drops that slide and merge">
<!-- Everything is painted on this canvas: bokeh backdrop, wet trail, drops.
Decorative, so removed from the accessibility tree. -->
<canvas class="rog-canvas" id="rogCanvas" aria-hidden="true"></canvas>
</div>
🔒 Unlock the full code — from €2.99 the first month
Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
CFG.rateMs — spawn cadence |
4 | Roughly one drop every rateMs frames. 18 gives sparse drizzle, 3 a downpour. This is the setting that most changes how the scene reads. |
CFG.sizeScale — drop scale |
1.3 | Multiplies every radius. Below 0.8 the refraction becomes unreadable; above 2 drops merge almost immediately and form runs. |
CFG.opaque — opaque mode |
false | Paints drops flat instead of translucent. Turn it on for high-contrast settings, or when the scene behind the glass is already busy. |
MAXD — maximum drop count |
72 | Simulation ceiling. Merge detection is O(n²), so cost climbs fast: 72 is a held compromise; past 120 the loop becomes noticeable on mobile. |
MAXT — wake micro-droplets |
150 | How many traces sliding drops leave behind. Lowering to 60 gives a cleaner pane, raising to 250 visibly streaming glass. |
| Wet-ribbon evaporation rate | slow per-frame decay | Sets how long a trail stays visible. Slow evaporation gives lastingly wet glass; fast, streaks that vanish almost at once. |
| Bokeh backdrop palette | urban night | The bloom table reads [x %, y %, radius, 'r,g,b', alpha]. Replacing it is enough to move from a night street to a sunset or a warm interior, without touching the physics. |
FAQ
Because that is what a water drop does. A drop resting on glass behaves as a convex lens: it inverts the image it transmits. So the code applies a
scale(-1, 1) after zooming the backdrop. Few simulations reproduce that detail, and it is precisely what makes the eye read "drop" rather than "blurred circle".Yes, with one caveat. The bokeh backdrop is painted only once, so per-frame cost comes from the drops: O(n²) merge detection plus one clip and one
drawImage each. At 72 drops that is comfortable on a recent device. On an entry-level model, drop MAXD to 40 and MAXT to 80: the scene stays convincing and the per-frame budget halves.Yes, and it is the most rewarding customisation. Replace the offscreen backdrop with your image, drawn once at canvas size. The whole mechanism — refraction, wet ribbon, distortion — reads that offscreen canvas without knowing what is in it. One precaution: keep a contrasty image, because refraction inside a drop a few pixels wide only reads if the backdrop has clearly marked light and dark areas.
