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
Ver todos: FondosDó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.