HTML + CSSFondos
Cáusticas de agua
Una red de luz que ondula como el fondo de una piscina al sol, hecha con un filtro SVG.
Ajustes
1x
1x
1
Código
<div class="pt-water"><svg><filter id="pt-water-f" x="0" y="0" width="100%" height="100%"><feTurbulence id="pt-water-t" type="turbulence" baseFrequency="0.006 0.009" numOctaves="1" seed="4"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -40 3"/></filter><animate href="#pt-water-t" attributeName="baseFrequency" dur="18s" values="0.006 0.009;0.008 0.007;0.006 0.009" repeatCount="indefinite"/><rect width="100%" height="100%" filter="url(#pt-water-f)"/></svg><b></b></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 Fondos
Dónde usarlo
Las cáusticas meten el verano en la pantalla. Quedan bien en la web de un hotel de playa, en las rebajas de una tienda de surf o en la reserva de una excursión en barco. La luz no para de moverse y la página se siente fresca sin cargarla. Un fondo de agua animado en HTML y CSS.
Los azules y el turquesa son la opción obvia, pero con un verde profundo parece un lago o un spa. Los filtros SVG pesan más que un degradado normal, así que, si la página ya va cargada de imágenes, pruébala antes en un móvil de gama media.