Ventana con gotas de lluvia
Gotas que resbalan por el cristal y se juntan; cada una refleja la ciudad del revés, como una lente diminuta.
Ajustes
Código
<div class="uvq11-rain"><div class="bg" aria-hidden="true"><span class="ne">Abierto 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>Lluvia</button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una ventana de noche bajo la lluvia hecha con HTML, CSS y un script corto. La ciudad del fondo es un bokeh de degradados y cada gota lleva una copia invertida de esa escena, como hacen las lentes de agua reales. Las gotas grandes resbalan, se paran, se juntan y dejan rastro. Encaja en apps del tiempo, portadas con ambiente y reproductores de música.
Cambia los dos colores principales para repintar los neones y el letrero, y edita el texto con el nombre de tu bar o tienda. Toca el cristal para soltar una gota gorda y pausa la lluvia con el botón.