HTML + CSSBackgrounds
Raindrops on a pond
Rings spread across dark water at random spots, as if drops were landing on a still pond.
Settings
1x
1x
1
Code
<div class="pt-pond"><i style="left:5.0%;top:35.7%;--t:8.7s;--dl:-1.2s"></i><i style="left:57.3%;top:25.3%;--t:7.2s;--dl:-3.6s"></i><i style="left:42.5%;top:81.0%;--t:7.6s;--dl:-1.3s"></i><i style="left:43.0%;top:17.7%;--t:8.1s;--dl:-4.3s"></i><i style="left:18.3%;top:27.9%;--t:7.6s;--dl:-1.9s"></i><i style="left:74.9%;top:64.7%;--t:6.7s;--dl:-6.3s"></i><i style="left:88.1%;top:40.0%;--t:5.1s;--dl:-5.2s"></i><i style="left:70.5%;top:17.5%;--t:5.2s;--dl:-1.4s"></i><i style="left:64.5%;top:56.0%;--t:6.2s;--dl:-7.5s"></i><i style="left:83.9%;top:91.5%;--t:7.8s;--dl:-0.5s"></i><i style="left:18.7%;top:43.2%;--t:8.4s;--dl:-7.7s"></i><i style="left:50.0%;top:40.9%;--t:8.4s;--dl:-1.8s"></i><i style="left:94.9%;top:41.1%;--t:6.2s;--dl:-6.9s"></i><i style="left:81.2%;top:11.5%;--t:8.4s;--dl:-4.5s"></i></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
Where to use it
Ripples on water are about calm and presence, so they work for the home screen of a mindfulness app, the website of a spa or thermal baths, or the booking page of a lakeside retreat. The drops land at random, which keeps the rhythm from feeling mechanical. An animated water ripple background in HTML and CSS.
Slow it down a touch for meditation or sleep content; the default is closer to light rain. Big, thin headings in white look great floating over the rings, especially if you drop the opacity slightly.