HTML + CSSLiquid Glass
Rainy window with drops
Raindrops slide down the glass and merge, and each one shows the city upside down like a tiny lens.
Settings
16px
1x
Code
<div class="uvq11-rain"><div class="bg" aria-hidden="true"><span class="ne">Open 24 h</span></div><div class="gl" aria-hidden="true"></div><button type="button" class="ch" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15a4 4 0 0 1 .5-8 5.5 5.5 0 0 1 10.5 1.5A3.5 3.5 0 0 1 17.5 15"/><path d="M9 18l-1 2M13 18l-1 2M17 18l-1 2"/></svg>Rain</button></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 Liquid Glass
See all Liquid GlassWhere to use it
A night window in the rain built with HTML, CSS and a short script. The city behind is a soft bokeh of gradients, and every drop carries an inverted copy of it, the way real water lenses do. Heavy drops slide, stop, merge and leave a trail. It fits weather apps, moody landing pages and music players.
Change the two main colors to repaint the neon lights and the sign, and edit the text to name your own bar or shop. Tap the glass to drop a large bead, and pause the rain with the button.