Rain on a window
Droplets slide down a window pane with blurred city lights glowing behind the glass, drawn on canvas.
Settings
Code
<div class="pt-rain-glass"><div class="bk"><i style="--x:0.1%;--y:97.0%;--s:18.1em;--c:var(--c1);--dl:-5.9s"></i><i style="--x:48.2%;--y:92.5%;--s:12.4em;--c:var(--c2);--dl:-6.2s"></i><i style="--x:81.6%;--y:5.7%;--s:19.8em;--c:var(--c3);--dl:-2.1s"></i><i style="--x:61.8%;--y:14.6%;--s:19.4em;--c:var(--c1);--dl:-1.6s"></i><i style="--x:7.5%;--y:70.1%;--s:19.7em;--c:var(--c2);--dl:-0.7s"></i><i style="--x:99.1%;--y:49.6%;--s:16.2em;--c:var(--c3);--dl:-5.4s"></i><i style="--x:0.1%;--y:95.1%;--s:13.4em;--c:var(--c1);--dl:-4.1s"></i><i style="--x:85.6%;--y:80.8%;--s:19.1em;--c:var(--c2);--dl:-2.9s"></i><i style="--x:88.3%;--y:31.9%;--s:20.8em;--c:var(--c3);--dl:-7.0s"></i><i style="--x:57.0%;--y:83.3%;--s:11.2em;--c:var(--c1);--dl:-2.0s"></i><i style="--x:48.1%;--y:41.2%;--s:18.1em;--c:var(--c2);--dl:-4.4s"></i><i style="--x:28.8%;--y:61.4%;--s:14.7em;--c:var(--c3);--dl:-4.1s"></i><i style="--x:81.7%;--y:71.3%;--s:18.0em;--c:var(--c1);--dl:-3.8s"></i><i style="--x:63.7%;--y:1.7%;--s:17.3em;--c:var(--c2);--dl:-1.2s"></i></div><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
A moody, cinematic background. Soft out of focus lights in your three colors glow behind the pane while small droplets gather on the glass. Every so often a large drop starts to slide, pauses, speeds up again, swallows the small drops in its path and leaves a trail of tiny beads behind, just like rain on a real window.
Each drop is shaded with a highlight and a darker rim to suggest refraction. Density controls how wet the glass gets, and speed changes how fast the drops run. It suits podcasts, cafés, music players and quiet reading sites.