Fondo lámpara de lava
Manchas cálidas que suben, se estiran y se funden entre sí por toda la pantalla, en HTML y CSS puros.
Ajustes
Código
<div class="pt-lava"><svg width="0" height="0" style="position:absolute"><filter id="pt-lava-f"><feGaussianBlur in="SourceGraphic" stdDeviation="18"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -11"/></filter></svg><b><i style="left:5.1%;--z:18.1cqmin;--t:17.9s;--dl:-8.7s"></i><i style="left:80.1%;--z:13.8cqmin;--t:13.7s;--dl:-17.8s"></i><i style="left:71.1%;--z:13.5cqmin;--t:21.0s;--dl:-17.0s"></i><i style="left:15.6%;--z:10.6cqmin;--t:20.5s;--dl:-14.7s"></i><i style="left:10.2%;--z:19.5cqmin;--t:20.9s;--dl:-21.2s"></i><i style="left:67.8%;--z:16.1cqmin;--t:22.0s;--dl:-21.1s"></i><i style="left:44.3%;--z:15.2cqmin;--t:13.1s;--dl:-13.1s"></i><i style="left:56.7%;--z:19.9cqmin;--t:13.3s;--dl:-1.8s"></i><i style="left:13.1%;--z:12.5cqmin;--t:21.3s;--dl:-21.2s"></i><i style="left:62.1%;--z:17.9cqmin;--t:14.5s;--dl:-3.6s"></i><u></u><u></u></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
Si el loader de lámpara de lava es un objeto pequeño, este fondo llena toda la pantalla de formas lentas que se derriten. Da un brillo retro y psicodélico a la web de un festival, la página de un sello independiente o la portada de una coctelería. Las manchas suben desde abajo y se unen por el camino.
Tiene mucha presencia: dale una sección para él solo, como la portada o el banner de entradas, y no lo pongas tras textos largos. Baja la densidad para tener menos manchas y más grandes. Los naranjas son el clásico; rosa y azul eléctrico suenan más a noche de club.