Fondo de blobs gooey
Gotas de color que orbitan, se funden y se separan como un líquido. Fondo a pantalla completa en HTML y CSS puros.
Ajustes
Código
<div class="pt-goo"><svg width="0" height="0" style="position:absolute"><filter id="pt-goo-f"><feGaussianBlur in="SourceGraphic" stdDeviation="22"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -13"/></filter></svg><b><i style="--cc:var(--c1);--z:12.0cqmin;--r:21.3cqmin;--t:16.5s;--wx:-7.4cqmin;--wy:-19.1cqmin"></i><i style="--cc:var(--c2);--z:22.3cqmin;--r:34.2cqmin;--t:17.8s;--wx:-7.8cqmin;--wy:18.9cqmin"></i><i style="--cc:var(--c3);--z:18.4cqmin;--r:43.9cqmin;--t:27.8s;--wx:6.5cqmin;--wy:-15.3cqmin"></i><i style="--cc:var(--c1);--z:21.4cqmin;--r:35.6cqmin;--t:22.3s;--wx:0.9cqmin;--wy:-14.1cqmin"></i><i style="--cc:var(--c2);--z:13.8cqmin;--r:40.9cqmin;--t:18.9s;--wx:5.7cqmin;--wy:-13.8cqmin"></i><i style="--cc:var(--c3);--z:18.9cqmin;--r:20.1cqmin;--t:18.9s;--wx:-18.7cqmin;--wy:19.7cqmin"></i><i style="--cc:var(--c1);--z:13.1cqmin;--r:35.9cqmin;--t:16.9s;--wx:6.2cqmin;--wy:7.1cqmin"></i><i style="--cc:var(--c2);--z:15.3cqmin;--r:36.5cqmin;--t:17.4s;--wx:-7.6cqmin;--wy:-14.8cqmin"></i><i style="--cc:var(--c3);--z:12.3cqmin;--r:35.1cqmin;--t:23.0s;--wx:-19.7cqmin;--wy:-13.3cqmin"></i></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
Un fondo de blobs gooey pone algo blando y vivo detrás del titular de una portada: un estudio creativo, una marca de golosinas o bebidas, una app de música, el lanzamiento de un producto desenfadado. Nueve gotas de tres colores se mueven y se funden entre sí, y es todo CSS, así que entra en cualquier página sin framework.
El desenfoque que funde las gotas le cuesta al navegador, y en móviles antiguos puede ir a saltos; úsalo en una sección y no en toda la web. Si hay texto encima, baja primero la opacidad y luego la velocidad.